Three.js 火焰粒子效果 - v0.142.0 代码示例

const particleCount = 1000;
const particles = new THREE.Geometry();

for (let p = 0; p < particleCount; p++) {
  const particle = new THREE.Vector3(
    Math.random() * 50 - 25,
    Math.random() * 50 - 25,
    Math.random() * 50 - 25
  );
  particles.vertices.push(particle);
}

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.vertices[i];
    particle.add(velocity);
    if (particle.y > 25) {
      particle.y = Math.random() * -10;
      particle.x = Math.random() * 50 - 25;
      particle.z = Math.random() * 50 - 25;
    }
  }
  particleSystem.geometry.verticesNeedUpdate = true;
}