Three.js 粒子系统笔记

首页背景的粒子场实现要点。

核心：THREE.Points

• 用 BufferGeometry + Float32Array 存粒子位置，性能远高于单个 Mesh 循环
• PointsMaterial 开 vertexColors 可以让每个粒子带自己的颜色
• AdditiveBlending 加色混合 + depthWrite: false，重叠处自然发亮，做出”荧光尘埃”感

配色思路（Active Theory 风格）

• 近黑底 #0a0e12 压住画面
• 霓虹红 #ff2d55 / 洋红 #ff5ce1 / 青 #29e6d2 三色随机
• 少量（8%）粒子颜色 ×1.6 提亮，模拟 bokeh 光斑

性能与降级

• setPixelRatio(min(devicePixelRatio, 2)) 控制像素比
• 移动端粒子数 1600 → 600
• prefers-reduced-motion: reduce 时只渲染静态一帧

待实验

• 自定义 shader 让粒子有大小差异和闪烁
• UnrealBloomPass 辉光后期
• 滚动驱动的相机穿越