🎬 开场白
当你以为舞台已经嗨到极限时，真正的魔法才刚刚开始。
灯光和音乐只能点燃气氛，但 魔法特效 才能让观众尖叫！🔥
这一章，我们要把代码化作魔杖，把像素变成星尘。
🚀 粒子烟花、🌈 流光残影、🪄 Shader 魔法 —— 统统安排！
从这一刻起，你不只是舞台导演，而是“舞台魔法师”。
准备好了吗？
是时候施放你的第一发烟花咒语了！🎇
舞台的烟火师-粒子烟花
在舞台上，如果没有烟花、飘雪、星光点缀，总觉得气氛少点“魔法味”。
好在 Three.js 的粒子系统就像一个万能烟火师，能帮你随时放烟花、下雪、撒星光，还能随观众互动来一场“点击爆炸秀”。
常见玩法
| 效果场景 | 通俗比喻 | 实现思路 |
|---|---|---|
| 烟花助威 🎆 | 歌曲副歌一到，满天彩纸炸开 | 随机生成一堆粒子 → 向上飞 → 碰到高度后四散 |
| 飘雪/星光 ❄️✨ | 舞台一直下着“浪漫雪花”或“星星眨眼” | 粒子缓慢下落，到地面后回到顶部循环 |
| 点击爆炸 💥 | 观众鼠标一点击，舞台立刻“砰”一声 | 监听 click → 获取坐标 → 在该点生成新粒子爆炸 |
舞台的光影画笔-流光残影
舞台上如果缺少光影残留的魔法，总觉得画面少了灵动感。
流光残影就像一个“光影画师”，能让舞台元素拖出尾迹、留下轨迹，制造炫酷的视觉流动效果，还能随观众互动瞬间生成光流。
常见玩法
| 效果场景 | 通俗比喻 | 实现思路 |
|---|---|---|
| 流光尾迹 ✨ | 像舞台上舞者挥动手杖留下的光带 | 粒子跟随移动轨迹生成 → 渐渐变透明消失 → 形成拖尾效果 |
| 光影轨迹 🌟 | 光点沿路径飞行，拖出彩色光痕 | 利用 Line 或 TrailParticle → 更新位置 → 颜色渐变 |
| 旋转光环 💫 | 旋转的光圈在舞台上漂浮 | 粒子按环形轨迹旋转 → 透明度渐变 → 可叠加多个环 |
| 碰撞闪光 ⚡ | 两光点相撞，瞬间爆出流光 | 监听粒子碰撞 → 生成短时高亮粒子 → 快速消散 |
| 颜色渐变流 🌈 | 光点从冷色到暖色过渡，像彩虹滑动 | 粒子颜色随时间或位置变化 → 渐变动画实现流动感 |
Shader 魔法
在 Three.js 粒子系统里，粒子本身只是一个点（Point），它的酷炫效果大部分由 Shader 实现。Shader 就像 GPU 上的小魔法师，每个顶点或像素都能被它单独掌控。
基本概念
| 名称 | 类型 | 作用 | 通俗比喻 |
|---|---|---|---|
| Vertex Shader | 顶点着色器 | 决定每个顶点的位置、大小、旋转等 | 像舞台布景设计师，决定每个演员站在哪儿、怎么摆姿势 |
| Fragment Shader | 片元着色器 | 决定每个像素的颜色和光照 | 像化妆师和灯光师，把每个演员涂上颜色、打上光影 |
| Uniforms | 全局变量 | 传给 Shader 的外部参数，渲染时不会变 | 像导演给的舞台参数：灯光亮度、舞台时间、天气效果 |
| Attributes | 顶点属性 | 每个顶点独有的数据，如位置、法线、UV | 像演员的个人信息：身高、衣服颜色、特技 |
| Varyings | 变化量 | Vertex Shader 传给 Fragment Shader 的数据 | 像演员动作传递给化妆师参考，确保颜色和灯光跟动作配合 |
| GLSL | Shader 编程语言 | 写 Vertex/Fragment Shader 的语言 | 像舞台剧的剧本语言，导演和演员都能理解 |
使用步骤
| 步骤 | 描述 | 示例/说明 | 小贴士 |
|---|---|---|---|
| 1. 定义 Shader 材质 | 使用 THREE.ShaderMaterial 创建自定义材质 | const material = new THREE.ShaderMaterial({ vertexShader, fragmentShader, uniforms }); | 顶点着色器负责顶点位置变化，片元着色器负责像素颜色渲染 |
| 2. 编写顶点着色器 (Vertex Shader) | 控制顶点坐标、形状变化 | attribute vec3 position; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } | 顶点着色器可以做动画效果，如波浪、旋转、膨胀 |
| 3. 编写片元着色器 (Fragment Shader) | 控制每个像素的颜色 | void main() { gl_FragColor = vec4(1.0,0.5,0.0,1.0); } | 可以使用渐变、噪声、光照等制造炫酷视觉效果 |
| 4. 定义 Uniforms | 外部传入变量，控制动画或颜色 | js const uniforms = { uTime: { value: 0.0 } }; | 可以在 render 循环里动态更新 uniforms 来实现动画 |
| 5. 创建几何体并绑定 Shader | 将材质应用到网格 | const mesh = new THREE.Points(geometry, material); scene.add(mesh); | 点云、球体、平面都可以使用 ShaderMaterial |
| 6. 渲染与动画循环 | 使用 requestAnimationFrame 更新 uniforms | function animate() { uniforms.uTime.value += 0.01; renderer.render(scene,camera); requestAnimationFrame(animate); } animate(); | 可以结合鼠标、音频等交互实时改变效果 |
| 7. 调试与优化 | 观察 Shader 错误并调整 | 检查 THREE.WebGLProgram: Shader Error 错误 | Shader 编写容易出错，保持小步调试，先实现静态效果再加动画 |
使用小贴士
- 顶点着色器 vs 片元着色器：顶点处理形状，片元处理颜色
- Uniforms：是
Shader外部可控的“魔法杖”，能实时改变效果 - 调试技巧：先用纯色或简单渐变测试，再加复杂数学运算
- 结合粒子系统：
Shader能让粒子颜色渐变、闪烁、旋转、碰撞闪光等效果更炫酷 - 性能考虑：
Shader是GPU运算，尽量减少复杂循环，尤其是片元着色器
🌟 结尾
这一章节，我们正式开启了 Three.js 魔法特效之旅。虽然内容还没讲得特别细致，但核心目标是让你感受效果，先嗨起来：
- 粒子烟花：像素化的火花飞舞，点亮舞台。
- 流光残影：物体运动留下彩色尾迹，炫酷又直观。
- Shader 魔法：自定义光影与颜色，让你的场景充满奇幻感。
💡 提示：这一章的很多细节、原理和优化方法暂时先不深入，目的是先展示效果，让你看到可能性。后续章节会逐步拆解 Shader、粒子系统、材质属性等技术细节。
下一章我们要玩 Three.js 积木：聊聊顶点、线条和面片的世界。没错，就是那些“支撑整个三维世界”的小家伙——几何体（Geometry）
