用threejs实现一个火焰效果

要使用 Three.js 实现火焰效果，可以通过以下步骤：

1. 创建一个场景、相机和渲染器。

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);

2. 创建一个火焰材质。

使用 ShaderMaterial 来创建火焰材质，通过 GLSL 代码来实现火焰效果。

const fireMaterial = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 1.0 },
    resolution: { value: new THREE.Vector2() }
  },
  vertexShader: document.getElementById('fire-vertex-shader').textContent,
  fragmentShader: document.getElementById('fire-fragment-shader').textContent
});

其中，'fire-vertex-shader' 和 'fire-fragment-shader' 是两个 HTML 元素，分别用来存放顶点着色器和片元着色器的 GLSL 代码。

3. 创建一个火焰粒子系统。

使用点精灵来创建火焰粒子系统，将火焰材质应用到每个粒子上。

const fireGeometry = new THREE.Geometry();
for (let i = 0; i < 1000; i++) {
  const particle = new THREE.Vector3(0, 0, 0);
  fireGeometry.vertices.push(particle);
}
const fireParticles = new THREE.Points(fireGeometry, fireMaterial);
scene.add(fireParticles);

4. 更新火焰效果。

在每一帧中，更新火焰材质的时间参数，并且更新火焰粒子系统的位置。

function animate() {
  requestAnimationFrame(animate);

  const time = performance.now() * 0.001;
  fireMaterial.uniforms.time.value = time;

  for (let i = 0; i < fireGeometry.vertices.length; i++) {
    const particle = fireGeometry.vertices[i];
    particle.y += Math.random() * 0.2;
    if (particle.y > 50) {
      particle.y = -50;
    }
  }
  fireGeometry.verticesNeedUpdate = true;

  renderer.render(scene, camera);
}
animate();

完整的代码示例可以参考以下链接：https://codepen.io/kevinfeng112233/pen/OJjOaGQ