Three.js 官方例子太散？按场景整理好的 60 个动效模板

学 Three.js 的人都去过官网 examples 页面：200 多个例子，每个演示一个技术点。但问题是，它们是“技术演示”，不是“网站效果”——你想做个炫酷首屏，得自己从 5 个例子东拼西凑。下面按真实网站的 4 个场景，把例子和现成模板对应起来。

场景一：网站首屏（Hero）

首屏要的是“第一眼震撼 + 加载快”。官方例子里 webgl_points、webgl_shader 可以改，但都要自己拼。直接拿模板更快：

• ·极光/星空类：[极光夜空](https://eazyopc.com/fx-lab)（对应官方 webgl_shadersky 的场景化版本）
• ·粒子 logo：GPU 粒子聚散（对应官方 webgl_points 的产品化版本）
• ·流体背景：fbm 噪声流体，性能开销最小的首屏方案

场景二：滚动转场

官方没有现成的滚动叙事例子，得自己写 scroll 监听 + 相机插值。虫洞穿越模板把这套做完了：滚动进度映射 FOV 和速度，拿过去改颜色就行。

场景三：产品 3D 展示

官方 webgl_loader_gltf 只演示加载，不演示交互。产品展示需要：拖拽旋转 + 自动转 + 热点标注。这三件套模板里都有，GLB 记得先减面（面数压到 30%，体积减半，肉眼看不出区别）。

场景四：全屏背景动效

这是最常用的场景：网站内容正常排，背后一层缓慢动的 3D。关键是“别抢戏”——透明度降到 0.3 以下，动画速度放慢 50%。动效实验分类下 60 个模板，一大半是干这个的。

Three.js 的学习曲线陡，但上线不一定非要自己从零写。站在模板的肩膀上，把时间花在业务和美术上，产出快 10 倍。