three.js粒子基础

### Three.js 粒子系统的基础用法 在 Three.js 中，粒子系统可以通过 `THREE.Points` 实现。它允许开发者在三维空间中渲染大量小型几何图形（通常称为粒子），并利用材质对其进行自定义显示[^1]。 #### 使用 `Points` 和 `PointsMaterial` 以下是构建基本粒子系统的步骤： 1. **创建几何体** 可以使用内置的几何体如 `SphereGeometry` 或者更高效的 `BufferGeometry` 来存储粒子的位置信息。对于大规模粒子系统，推荐使用 `BufferGeometry` 以便更好地管理内存和性能[^3]。 2. **设置材质** 使用 `THREE.PointsMaterial` 设置粒子的颜色、透明度和其他视觉属性。默认情况下，粒子呈现为正方形贴图，也可以通过加载纹理来自定义形状。 3. **组合几何体与材质** 将几何体和材质传递给 `THREE.Points` 对象，并将其添加到场景中。 下面是一个完整的代码示例，展示如何创建一个简单的粒子系统： ```javascript // 导入必要的模块 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); // 创建几何体 (使用 BufferGeometry 存储粒子位置) const geometry = new THREE.BufferGeometry(); const particlesCount = 5000; const positions = new Float32Array(particlesCount * 3); // 每个粒子有三个坐标分量 for (let i = 0; i < particlesCount * 3; i++) { positions[i] = Math.random() * 100 - 50; // 随机分布在 (-50, 50) 范围内的坐标 } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); // 创建材质 const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.5, transparent: true, opacity: 0.8, }); // 组合几何体和材质形成粒子系统 const points = new THREE.Points(geometry, material); scene.add(points); camera.position.z = 50; function animate() { requestAnimationFrame(animate); // 更新粒子状态（可选） for (let i = 0; i < particlesCount * 3; i += 3) { positions[i + 1] -= 0.05; // 让粒子向下移动模拟重力 if (positions[i + 1] < -50) { positions[i + 1] = 50; // 当超出边界时重新初始化高度 } } geometry.attributes.position.needsUpdate = true; // 标记几何体需要更新 renderer.render(scene, camera); } animate(); ``` 此代码展示了如何生成一个带有简单动画效果的粒子系统。每个粒子都会逐渐下移，到达底部后重新回到顶部循环播放。 --- ### 关于粒子生命周期的扩展功能 如果希望进一步增强粒子的效果，可以引入粒子的生命周期概念。例如，在烟花特效中，每颗粒子都有自己的生存时间，随着生命值减少而改变大小或透明度直至完全消失。 以下是如何实现这一机制的关键部分： 1. **初始化粒子的生命值** 在构造函数中分配初始寿命数组 `this.life` 并赋予随机数值。 2. **更新逻辑** 每帧递减生命值，并根据剩余比例调整粒子尺寸或不透明度。 具体实现方式已在引用中的 `Firework` 类有所体现。 ---