three.js 粒子，五彩烟花升空后绽放

Three.js 是一个非常流行的 JavaScript 三维图形库，它为 web 开发者提供了丰富的工具和API，用于创建交互式的 3D 场景，包括粒子系统。在 Three.js 中，粒子系统（Particle System）是一种常用的效果，可以用来模拟各种动态效果，如火焰、烟雾、雪花或五彩烟花等。

当你在 Three.js 中创建一个五彩烟花升空并绽放的场景，通常会这样操作：

1. **创建粒子系统**：首先，你需要实例化一个 `THREE.Points` 或 `THREE.Geometry` 对象，并设置一个粒子材质（Material），这个材质可能包含颜色和速度信息。

const particleCount = 1000;
const geometry = new THREE.Geometry();
const material = new THREE.PointsMaterial({
  color: 0xffffff, // 白色
  size: 10, // 粒子大小
  blending: THREE.AdditiveBlending, // 用于颜色叠加
  transparent: true,
});
const particles = new THREE.Points(geometry, material);

2. **添加随机性和变化**：为了模拟烟花效果，粒子的位置、颜色、速度等属性需要随机生成。你可以使用 `Random` 类或者 JavaScript 的 Math.random() 函数来实现。

for (let i = 0; i < particleCount; i++) {
  const x = Math.random() * width;
  const y = height + Math.random() * 100; // 烟花从底部升起
  const z = Math.random() * 200; // 高度范围
  geometry.vertices.push(new THREE.Vector3(x, y, z));
}

3. **动画和升空**：创建一个 `THREE.AnimationMixer` 或者 `THREE.KeyframeAnimation` 来控制粒子的运动，比如让它们随时间逐渐升高和绽放。

4. **添加动画帧**：定义关键帧，调整粒子的位置和颜色，使其看起来像烟花绽放。

5. **渲染与更新**：将粒子添加到场景中，然后在渲染循环中（`renderer.render()`）更新粒子的位置，并确保将它们添加到相机视野内。

function animate() {
  requestAnimationFrame(animate);
  mixer.update(); // 更新动画
  renderer.render(scene, camera);
}