Three.js粒子系统开发实战：从基础到性能优化

1. 粒子系统核心原理

粒子系统是三维图形开发中实现烟雾、火焰、星空等效果的核心技术，Three.js通过Points类实现高效粒子渲染：

‌渲染机制‌：使用GL_POINTS图元进行批量渲染
‌数据结构‌：基于BufferGeometry存储粒子位置等属性
‌着色器优化‌：顶点着色器实现并行计算
‌性能瓶颈‌：CPU-GPU数据传输效率决定最大粒子数

2. 基础粒子系统实现

2.1 创建粒子几何体

javascript 复制代码

// 创建包含10000个粒子的系统
const PARTICLE_COUNT = 10000;
const geometry = new THREE.BufferGeometry();

// 初始化粒子位置
const positions = new Float32Array(PARTICLE_COUNT * 3);
for (let i = 0; i < PARTICLE_COUNT; i++) {
  positions[i * 3] = (Math.random() - 0.5) * 10; // X
  positions[i * 3 + 1] = (Math.random() - 0.5) * 10; // Y
  positions[i * 3 + 2] = (Math.random() - 0.5) * 10; // Z
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

// 添加随机颜色属性
const colors = new Float32Array(PARTICLE_COUNT * 3);
for (let i = 0; i < PARTICLE_COUNT; i++) {
  colors[i * 3] = Math.random(); // R
  colors[i * 3 + 1] = Math.random(); // G 
  colors[i * 3 + 2] = Math.random(); // B
}
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

2.2 配置粒子材质

javascript 复制代码

const material = new THREE.PointsMaterial({
  size: 0.1,
  vertexColors: true, // 启用顶点颜色
  transparent: true,
  opacity: 0.8,
  depthWrite: false,
  blending: THREE.AdditiveBlending
});

const particles = new THREE.Points(geometry, material);
scene.add(particles);

3. 高级粒子效果实现

3.1 GPU加速动画

javascript 复制代码

// 在顶点着色器中添加运动逻辑
const vertexShader = `
attribute float size;
attribute float alpha;
varying vec3 vColor;
varying float vAlpha;

void main() {
  vColor = color;
  vAlpha = alpha;
  vec3 newPosition = position + 
    vec3(0, sin(time + position.x) * 0.3, 0);
  gl_PointSize = size;
  gl_Position = projectionMatrix * 
    modelViewMatrix * vec4(newPosition, 1.0);
}
`;

// 自定义着色器材质
const customMaterial = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader: `
  varying vec3 vColor;
  varying float vAlpha;
  void main() {
    gl_FragColor = vec4(vColor, vAlpha);
  }`,
  uniforms: {
    time: { value: 0 }
  },
  vertexColors: true
});

3.2 交互式粒子系统

javascript 复制代码

// 响应鼠标移动
const mouse = new THREE.Vector2();
window.addEventListener('mousemove', (e) => {
  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
});

// 在动画循环中更新粒子
function animate() {
  requestAnimationFrame(animate);
  
  const positions = geometry.attributes.position.array;
  const time = performance.now() * 0.001;
  
  // 将鼠标坐标转换为三维空间
  const vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
  vector.unproject(camera);
  
  for (let i = 0; i < PARTICLE_COUNT; i++) {
    const i3 = i * 3;
    // 计算粒子到鼠标的向量
    const dx = vector.x - positions[i3];
    const dy = vector.y - positions[i3 + 1];
    const distance = Math.sqrt(dx*dx + dy*dy);
    
    // 添加排斥力
    if (distance < 2) {
      positions[i3] += dx * 0.01;
      positions[i3 + 1] += dy * 0.01;
    }
  }
  
  geometry.attributes.position.needsUpdate = true;
  renderer.render(scene, camera);
}

4. 性能优化策略

4.1 数据复用技术

javascript 复制代码

// 创建共享类型数组
const buffer = new ArrayBuffer(PARTICLE_COUNT * 16);
const positions = new Float32Array(buffer, 0, PARTICLE_COUNT * 3);
const colors = new Uint8Array(buffer, PARTICLE_COUNT * 12, PARTICLE_COUNT * 4);

// 使用同一个内存区域
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 4, true));

4.2 粒子LOD（细节层级）控制

javascript 复制代码

function updateLOD(distance) {
  if (distance > 50) {
    material.size = 2;
    geometry.setDrawRange(0, 1000);
  } else if (distance > 20) {
    material.size = 1;
    geometry.setDrawRange(0, 5000);
  } else {
    material.size = 0.5;
    geometry.setDrawRange(0, PARTICLE_COUNT);
  }
}

5. 常见问题解决方案

5.1 粒子渲染异常排查

‌粒子不可见‌：
- 检查材质size是否过小
- 确认相机近剪裁平面设置
- 验证透明度混合模式
‌颜色显示异常‌：
- 确保材质vertexColors已启用
- 检查颜色值范围（0-1或0-255）
‌动画卡顿‌：
- 减少CPU数据更新频率
- 使用着色器实现动画逻辑
- 启用WebGL2实例化渲染

5.2 性能优化对照表

优化策略	粒子数提升	适用场景
关闭深度写入	+300%	透明粒子
使用共享内存	+50%	多属性粒子
启用实例化渲染	+500%	静态粒子群
GPU计算动画	+1000%	动态粒子效果

6. 完整示例：星空效果

javascript 复制代码

// 初始化场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 创建星体几何体
const starGeometry = new THREE.BufferGeometry();
const starVertices = [];
for (let i = 0; i < 10000; i++) {
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos((Math.random() - 0.5) * 2);
  const radius = Math.random() * 50 + 50;
  
  starVertices.push(
    radius * Math.sin(phi) * Math.cos(theta),
    radius * Math.sin(phi) * Math.sin(theta),
    radius * Math.cos(phi)
  );
}
starGeometry.setAttribute('position', 
  new THREE.BufferAttribute(new Float32Array(starVertices), 3));

// 创建星体材质
const starMaterial = new THREE.PointsMaterial({
  size: 0.2,
  color: 0xFFFFFF,
  blending: THREE.AdditiveBlending,
  depthTest: false
});

const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  stars.rotation.y += 0.001;
  renderer.render(scene, camera);
}
animate();

7. 进阶学习方向

WebGL2实例化渲染技术（InstancedMesh）
GPGPU技术实现复杂粒子逻辑
使用ComputeShader进行粒子计算
结合后期处理（BloomEffect）增强视觉效果

粒子系统的性能优化是Three.js开发的重要课题，建议从简单案例入手，逐步增加复杂度。通过合理运用着色器编程和内存管理技术，可以在保持60FPS的前提下实现超过百万粒子的流畅渲染。