1. 首页
  2. 分类
  3. javascript
Three.js 快速入门教程 01 - 搭建第一个3D场景
System
2024-08-19
所有,javascript



// 引入Three.js库
import * as THREE from 'three';
 
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建几何体、材质和网格对象
const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个立方体的几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建一个基本的材质，颜色设置为绿色
const cube = new THREE.Mesh(geometry, material); // 使用几何体和材质创建网格对象
scene.add(cube); // 将立方体添加到场景中
 
camera.position.z = 5; // 设置相机位置
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  renderer.render(scene, camera); // 渲染场景
}
 
animate(); // 开始动画循环

这段代码创建了一个简单的3D场景，包含一个旋转的绿色立方体。通过调用animate函数实现了一个简单的渲染循环，使得立方体可以持续旋转。这是学习Three.js的一个基本示例，展示了如何设置场景、相机、渲染器以及添加和动画处理几何体和材质。

- 阅读更多 -
掌握Vue CLI 3脚手架配置（vue.config.js）
System
2024-08-19
所有,javascript



// vue.config.js
module.exports = {
  // 选项...
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  // 输出文件目录
  outputDir: 'dist',
  // 静态资源目录 (js, css, img, fonts)
  assetsDir: 'assets',
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // CSS 相关选项
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false
  },
  // devServer 代理设置
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    open: true,
    proxy: {
      // 配置跨域处理 可以设置你想要代理的接口
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 插件选项
  pluginOptions: {
    // ...
  },
  // configureWebpack 或 chainWebpack 调整内部webpack配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
        } else {
          // 为开发环境修改配置...
        }
        return args;
      });
  }
};

这个示例展示了如何在vue.config.js中配置Vue CLI 3项目的基本设置，包括基本路径、输出目录、静态资源目录、是否生成source map文件、开发服务器设置、跨域代理配置以及自定义webpack配置。根据项目需求，可以适当调整配置。

- 阅读更多 -
Web网页设计：HTML+CSS+JavaScript大学生静态后台管理7个页面(带JS商品删除)
System
2024-08-19
所有,javascript

以下是一个简化的代码示例，展示了如何使用JavaScript在网页中删除一个商品。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品列表</title>
<style>
    #productList {
        width: 500px;
        margin: 20px;
        border: 1px solid #000;
        padding: 10px;
    }
    .product {
        padding: 10px;
        margin-bottom: 5px;
        border: 1px solid #000;
    }
    .product a {
        float: right;
        text-decoration: none;
        color: red;
    }
</style>
</head>
<body>
 
<div id="productList">
    <div class="product">
        商品A <a href="#" onclick="deleteProduct(event)">删除</a>
    </div>
    <div class="product">
        商品B <a href="#" onclick="deleteProduct(event)">删除</a>
    </div>
    <!-- 其他商品列表项 -->
</div>
 
<script>
function deleteProduct(e) {
    e.preventDefault(); // 阻止a标签默认行为（即不进行页面跳转）
    const product = e.target.parentNode; // 获取a标签的父节点，即.product元素
    product.parentNode.removeChild(product); // 从DOM中移除该商品节点
}
</script>
 
</body>
</html>

这个示例中，我们定义了一个名为deleteProduct的函数，该函数将作为商品删除链接的点击事件处理函数。函数接收一个事件对象e，通过e.preventDefault()阻止链接默认行为，然后获取并删除触发事件的商品列表项。这是一个简单的示例，展示了如何在静态网页中添加交互性。

- 阅读更多 -
分享three.js实现粒子背景
System
2024-08-19
所有,javascript

以下是一个使用three.js创建粒子背景的简单示例代码：




// 引入three.js库
import * as THREE from 'three';
 
// 创建场景
const scene = new THREE.Scene();
 
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建粒子物体
const geometry = new THREE.Geometry();
const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.5 });
 
// 生成一些随机的粒子
for (let i = 0; i < 1000; i++) {
  const vertex = new THREE.Vector3();
  vertex.x = Math.random() * 2 - 1;
  vertex.y = Math.random() * 2 - 1;
  vertex.z = Math.random() * 2 - 1;
  geometry.vertices.push(vertex);
}
 
const points = new THREE.Points(geometry, material);
scene.add(points);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转粒子
  points.rotation.x += 0.001;
  points.rotation.y += 0.001;
 
  renderer.render(scene, camera);
}
 
animate();

这段代码创建了一个简单的三维场景，包含了一个由随机生成的粒子构成的点集，通过旋转和渲染，实现了动态的粒子背景效果。这个示例可以作为创建类似效果时的基础，开发者可以根据自己的需求进行扩展和定制。

- 阅读更多 -
js实现读取excel文件
System
2024-08-19
所有,javascript

在JavaScript中，可以使用第三方库xlsx来读取Excel文件。以下是一个简单的例子，展示如何使用xlsx库读取Excel文件：

首先，确保安装了xlsx库：




npm install xlsx

然后，使用以下代码读取Excel文件：




const XLSX = require('xlsx');
 
// 读取Excel文件
function readExcel(file) {
  const reader = new FileReader();
 
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
 
    // 假设我们只读取第一个工作表
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
 
    console.log(json);
  };
 
  reader.readAsArrayBuffer(file);
}
 
// 假设你有一个input元素来上传文件
const inputElement = document.getElementById('input-excel');
inputElement.addEventListener('change', function(e) {
  const file = e.target.files[0];
  readExcel(file);
});

在HTML中，你需要有一个文件输入元素来上传Excel文件：




<input type="file" id="input-excel" />

这段代码会在用户选择文件后，读取并转换Excel文件内容为JSON格式。注意，这个例子只读取第一个工作表的内容。如果需要读取其他工作表或者有更复杂的需求，可以根据xlsx库的文档进行相应的扩展。

- 阅读更多 -
【环境准备】NodeJs(压缩包版本)安装与配置
System
2024-08-19
所有,javascript

在Linux环境下，可以使用以下步骤安装和配置Node.js：

  1. 下载Node.js压缩包：

    打开Node.js官方下载页面，选择适合你系统的版本。

  2. 使用wget或curl下载压缩包：

    


wget https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.xz

  3. 解压缩下载的文件：

    


tar -xJf node-v14.16.0-linux-x64.tar.xz

  4. 配置环境变量：

    编辑你的.bashrc或.profile文件，添加以下内容：

    


export NODEJS_HOME=/path/to/node-v14.16.0-linux-x64
export PATH=$NODEJS_HOME/bin:$PATH

    替换/path/to/为你的Node.js解压路径。

  5. 使配置生效：

    


source ~/.bashrc

  6. 验证安装：

    


node -v
npm -v

以上步骤会安装Node.js并将其添加到你的环境变量中，使得你可以在任何位置通过命令行运行Node.js和npm。记得替换下载链接和解压路径，使用与你系统匹配的Node.js版本。

- 阅读更多 -
node之vm2库，js沙盒环境
System
2024-08-19
所有,javascript

vm2 是一个 Node.js 模块，用于在一个隔离的沙箱环境中运行不信任的代码。以下是使用 vm2 创建沙箱并在其中运行代码的基本示例：

首先，安装 vm2：




npm install vm2

然后，使用 vm2 创建沙箱并执行代码：




const { VM } = require('vm2');
 
// 创建一个新的沙箱
const vm = new VM({
  timeout: 1000, // 设置代码执行的超时时间为1000毫秒
  sandbox: { // 定义沙箱中的初始数据
    secret: 'a secret code'
  }
});
 
// 在沙箱中执行代码
const result = vm.run('secretFunction(secret)', 'myScript.vm2');
 
console.log(result); // 输出代码执行的结果

在这个例子中，我们创建了一个新的 VM 实例，并设置了一些选项，如超时和初始化的沙箱环境。然后，我们在这个沙箱中执行了一个简单的函数，它使用了一个秘密信息。这个函数的定义不是在沙箱外定义的，而是在沙箱内部定义的。这样可以提供一定程度的代码隔离。

- 阅读更多 -
js取出数组对象中的全部key值和全部value值
System
2024-08-19
所有,javascript

在JavaScript中，可以使用Object.keys()方法来获取对象的所有键（key）值，使用Object.values()方法来获取对象的所有值（value）。如果数组中包含对象，可以遍历数组并分别获取键和值。

以下是获取数组对象中所有键和值的示例代码：




// 假设有如下数组对象
let arrayOfObjects = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 28 }
];
 
// 获取所有key值
let keys = arrayOfObjects.flatMap(obj => Object.keys(obj));
// 获取所有value值
let values = arrayOfObjects.flatMap(obj => Object.values(obj));
 
console.log(keys); // 输出：['name', 'age', 'name', 'age', 'name', 'age']
console.log(values); // 输出：['Alice', 25, 'Bob', 30, 'Charlie', 28]

在这个例子中，flatMap 方法用于遍历数组对象，并分别获取每个对象的键和值数组，然后将它们扁平化为一个单一数组。这样keys数组包含了所有键的值，values数组包含了所有值的值。

- 阅读更多 -
three.js零基础入门超全超细的教程整理
System
2024-08-19
所有,javascript

在这个系列中，我们将从零开始，逐步教你如何使用three.js创建一个3D场景。首先，我们需要在HTML文件中引入three.js库。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js 入门示例</title>
    <style>
        body { margin: 0; overflow: hidden; } 
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/build/three.min.js"></script>
    <script>
        // 这里是我们的Three.js代码
    </script>
</body>
</html>

接下来，我们将创建一个简单的3D场景，包括一个立方体和一个平面。




// 创建场景
const scene = new THREE.Scene();
 
// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
 
// 将立方体置于平面上方
cube.position.set(5, 5, 0);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
 
    // 旋转立方体和平面
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    plane.rotation.z += 0.01;
 
    renderer.render(scene, camera);
}
 
animate();

在这个简单的例子中，我们创建了一个场景，一个摄像机，一个渲染器，一个立方体和一个平面。然后，我们将立方体和平面添加到场景中，并设置了它们的渲染位置。最后，我们进入了一个渲染循环，使得所有的物体可以不断旋转，从而形成一个动态的3D场景。

- 阅读更多 -
js实现字符串转json对象的四种方法
System
2024-08-19
所有,javascript

在JavaScript中，可以使用以下四种方法将字符串转换为JSON对象：

  1. 使用JSON.parse()方法
  2. 使用eval()函数
  3. 使用new Function()构造函数
  4. 使用第三方库如jQuery.parseJSON()

方法1: 使用JSON.parse()

这是最常用的方法，它是原生的JavaScript方法，无需任何依赖。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // 输出: John

方法2: 使用eval()

虽然eval()可以解析JSON字符串，但它也能执行任何JavaScript代码，这在安全性上是一个问题。因此，不推荐使用。




var jsonString = '({"name":"John", "age":30, "city":"New York"})';
var jsonObj = eval('(' + jsonString + ')');
console.log(jsonObj.name); // 输出: John

方法3: 使用new Function()

这种方法虽然看起来有些复杂，但在某些情况下可以避免eval()的问题。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = (new Function('return ' + jsonString))();
console.log(jsonObj.name); // 输出: John

方法4: 使用jQuery.parseJSON()

如果你使用jQuery，可以使用$.parseJSON()方法解析JSON字符串。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = $.parseJSON(jsonString);
console.log(jsonObj.name); // 输出: John

注意：从jQuery 3.0开始，$.parseJSON()已被内置的JSON.parse()取代。因此，推荐使用JSON.parse()方法。

- 阅读更多 -
Copyright © 2024 Tech Blog
All Right Reserved | 京ICP备19053165号