Three.js v0.142.0 粒子系统火焰效果实现

本文将展示如何使用 Three.js v0.142.0 版本创建粒子系统，实现火焰效果。

代码示例

const particleCount = 1000;
const particles = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);

for (let p = 0; p < particleCount; p++) {
  positions[p * 3] = Math.random() * 50 - 25;
  positions[p * 3 + 1] = Math.random() * 50 - 25;
  positions[p * 3 + 2] = Math.random() * 50 - 25;
}

particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));

const particleMaterial = new THREE.PointsMaterial({
  color: 0xff3300,
  size: 1,
  blending: THREE.AdditiveBlending,
  transparent: true,
  opacity: 0.8
});

const particleSystem = new THREE.Points(particles, particleMaterial);
const velocity = new THREE.Vector3(0, 0.5, 0);
scene.add(particleSystem);

function animateFire() {
  for (let i = 0; i < particleCount; i++) {
    const particle = particleSystem.geometry.attributes.position.array[i * 3 + 1];
    particle += velocity.y;
    if (particle > 25) {
      particleSystem.geometry.attributes.position.array[i * 3 + 1] = Math.random() * -10;
      particleSystem.geometry.attributes.position.array[i * 3] = Math.random() * 50 - 25;
      particleSystem.geometry.attributes.position.array[i * 3 + 2] = Math.random() * 50 - 25;
    }
  }
  particleSystem.geometry.attributes.position.needsUpdate = true;
}

代码说明

创建粒子几何体：在 Three.js v0.142.0 中，建议使用 BufferGeometry 来存储粒子数据，以提高性能。代码首先创建了一个 BufferGeometry 对象，然后使用 Float32Array 存储所有粒子的位置数据。
设置粒子材质：代码创建了一个 PointsMaterial 对象，并设置了粒子颜色、大小、混合模式、透明度等属性。
创建粒子系统：使用 THREE.Points 类将粒子几何体和材质组合起来，创建粒子系统。
设置粒子速度：创建一个 THREE.Vector3 对象，用来存储粒子速度。
添加粒子系统到场景：将粒子系统添加到场景中。
动画函数：animateFire 函数用于更新每个粒子的位置，并根据条件重置粒子的位置。
更新几何体：在 animateFire 函数中，使用 geometry.attributes.position.needsUpdate = true; 来通知 Three.js 更新几何体数据。

兼容性说明

以上代码使用的是 Three.js v0.142.0 版本。在之前的版本中，THREE.Geometry 对象用于存储粒子数据，但现在建议使用 THREE.BufferGeometry。同时，更新几何体的方式也发生了改变，需要使用 geometry.attributes.position.needsUpdate = true; 来通知 Three.js 更新数据。

总结

本文介绍了如何使用 Three.js v0.142.0 版本创建粒子系统，实现火焰效果。代码示例展示了粒子生成、材质配置、动画更新等步骤，并提供兼容性说明。希望本文能帮助你更好地理解和应用 Three.js 的粒子系统。