这是一款用 Three.js r163 + anime.js + simplex-noise 打造的可交互粒子形态变形特效：15000 颗粒子在 4D 噪声驱动下呈云雾状游动，点击「Change Shape」按钮就会平滑 morph 到下一种形态——球体、立方、金字塔、圆环、星系、波浪，每种形态由几何算法程序生成；右下角四个色卡切换 Fire / Neon / Nature / Rainbow 四套色系，粒子的色相和亮度立刻响应。整套渲染走 EffectComposer + UnrealBloomPass，粒子有独立大小、透明度、效果强度属性，视觉上像一群会呼吸的萤火虫。
这款粒子变形动画的四个亮点
六种形态各有独立生成函数：球用黄金比 φ 均匀铺球面；立方按面随机取样；金字塔切侧面三角+底面；圆环按主小两半径参数化；星系按对数螺旋；波浪按 sin 曲面。全部返回 `Float32Array`，规模由 `particleCount = 15000` 一变量控制。
形态切换用 anime.js 补间 `morphState.progress` 从 0 到 1，每帧根据 progress 把 sourcePositions 和 targetPositions 用贝塞尔混合再叠上 swarm 云雾位置，形成「先散再聚」的爆炸感，而不是死板的线性插值。
粒子在待机时也不静止：`noise4D(x, y, z, t)` 给每颗粒子一个随时间漂移的 3D 噪声位移，配合缓慢自转，画面看起来永远在动。
4 套色系用 HSL 起止色 + 饱和/亮度定义，粒子的颜色按其到中心距离在起止色之间插值，切换配色时无需重建几何，直接改 attribute 就能瞬时更新。
粒子 morph 的三个关键取舍
其一，形态之间的 morph 时长写死 4 秒，配合 `swarmDistanceFactor: 1.5`，粒子会先向外扩张再向新形态收拢，比直线过渡更有生命力；如果嫌慢，改 `morphDuration: 4000` 即可。其二，闲置动画的 `idleFlowStrength` 与 `idleFlowSpeed` 一大一小控制「幅度」和「频率」，噪声频率越高幅度必须越低，否则粒子会散架——本模板给了保守默认。其三，粒子的大小在 `[0.08, 0.25]` 之间随机分布，弥补 `THREE.Points` 视觉过于均匀的问题，源码中均有注释可对照修改。
怎么加入自己的形态或换配色
要加第七种形态，仿照 `generateSphere` 写一个返回 `Float32Array` 的函数并加入 `SHAPES` 数组，`Change Shape` 按钮会自动循环到它。换成品牌色，把 `COLOR_SCHEMES` 里 startHue/endHue 换成自己的色相，也可以新增一整套并给按钮加一个色卡。想让形态更「实心」，减小 `swarmDistanceFactor` 到 0.5；想更「烟雾」，加到 3.0。粒子太多手机卡时把 `particleCount` 降到 5000 即可。
浏览器需支持 WebGL2、`Float32Array` 与 ES Modules；importmap 通过 CDN 加载 three、anime.js、simplex-noise，生产环境建议本地打包。移动端粒子数量建议减半。详细运行方法请参见压缩包内的帮助文档。
常见问题
能不能把粒子换成小图片精灵
能，但会牺牲不少性能。把 `THREE.PointsMaterial` 里加载贴图，用 alphaTest 处理透明；15000 张图片会加重 GPU 负载，建议降低粒子数到 3000 以下。
换成暗黑主题背景太亮怎么办
UnrealBloom 是本效果亮的主要来源。把 `bloomStrength: 1.3` 降到 0.6、`bloomThreshold: 0.05` 提到 0.2，画面会显著变暗；或直接去掉 bloomPass。
怎么让某个形态默认加载
改 `currentShapeIndex = 0` 为你想要的下标，形态列表在 `SHAPES` 数组。
可以和 GSAP 混用做时间轴联动吗
可以。用 GSAP 的 timeline 控制 `morphState.progress`、`bloomPass.strength`、`camera.position` 等属性，anime.js 的 morph 逻辑也可以替换成 GSAP 的 tween，两者不冲突。
适合放在哪些页面
适合品牌 Landing Page 首屏、产品发布视频背景、AI/元宇宙相关 Banner、活动大屏、艺术展互动装置。下载源码后可整段嵌入或作为独立展示区。
