这是一款用 Three.js r162 + EffectComposer 后处理搭出的粒子星形爆散特效：一万颗粒子沿一颗厚度感十足的五角星轨迹分布，画面持续在慢速自转与颜色呼吸；用户点击 Pulse 按钮就发出一波以中心为圆心的冲击波，粒子被沿径向推开、边缘泛橙红色高亮、随后按弹性曲线回吸复位。长按可蓄力发射更强的脉冲。右侧面板可切换 Molten（熔岩红黄）、Cosmic（宇宙紫）、Emerald（翡翠绿）三种主题，切换时 UnrealBloom 参数与色板同步更新。

这款星形粒子特效的四个亮点

五角星轨迹用 `createStarPath` 生成：先算 10 个顶点（外接圆 5 个 + 内接圆 5 个交替），把粒子索引映射到 10 段边上，段内线性插值——一万颗粒子等距分布在星形轨迹上，视觉勾勒出星形轮廓而不是一个团。
冲击波不是简单的位移动画，而是「向外扩散 + 到达 MAX_HOME_RADIUS 后弹性回吸」两段：每颗粒子记录自己被推开的进度，超过阈值后进入返回段，靠 shockwaves 数组内的时序控制，可以并发多个不冲突。
长按蓄力：`mousedown` 记录 chargeStart 时间戳，`mouseup` 或 `touchend` 结算时长决定脉冲强度，短按弱、长按强，交互反馈直觉且富有游戏感。
三主题不仅换粒子色，还换 UnrealBloomPass 的 strength/radius/threshold——Molten 强 0.35 半径 0.45、Cosmic 强 0.40 半径 0.50、Emerald 强 0.30 半径 0.60，视觉基调完全不同。

粒子脉冲背后的三个取舍

其一，冲击波用 CPU 计算而非 shader 内计算——这样可以并发多个不同起始时间的波浪，shockwaves 数组每帧遍历；一万颗粒子 × 每帧几次波浪判断，中端 CPU 也能扛住。其二，MAX_HOME_RADIUS = 45，粒子被推到这个距离后强制转入回吸阶段，防止无限扩散出画面；回吸曲线用简易弹簧模拟，收敛快但不僵硬。其三，`OrbitControls` 保留但只用于视角旋转，不允许平移（避免破坏中央构图）；粒子的呼吸颜色由主色相 sin 时间叠加实现，源码中均有注释。

要改星的形状或换配色需要什么

要把五角星改成七角星，`createStarPath` 里的 `numStarPoints = 5` 改成 7、内外径 `innerRadius/outerRadius` 按需调整。要在 4K 屏上更清晰，把 `renderer.setPixelRatio` 的 max 从 2 提到 3 但要注意性能。要新增第 4 种主题，往 `themes` 对象里加一个 key，`themes.myTheme = { name, colors: [...], bloom: {...} }`，右下角按钮会自动多一个。想让脉冲后不回吸而是自由散开，把回吸段的逻辑注释掉即可，但要注意粒子会持续飞出画面。

浏览器需支持 WebGL2 与 ES Modules：Chrome 90+、Safari 15+、Edge 90+、Firefox 88+；手机端建议把 `particleCount` 从 10000 减到 5000。详细运行方法请参见压缩包内的帮助文档。

常见问题

为什么点击后画面看不到明显爆散

检查 Pulse 按钮是否绑定成功、shockwaves 数组是否有 push。也可能是 bloomPass 强度过低看不到高亮痕迹，把 strength 临时调高到 1.0 试试。

能否改成鼠标滑过路径就发脉冲

能。把 mousedown/touchstart 换成 mousemove 节流触发，配合较小的脉冲强度，鼠标划过就会持续留下涟漪。

手机长按会不会误触

会。iOS 长按默认弹出上下文菜单，本模板在按钮上加了 `touch-action` 和 `contextmenu` 屏蔽逻辑；但如果你把按钮放到 body 别的位置，需要额外禁用长按选中。

能改成其他形状比如爱心或问号

能。核心是提供一个「按索引返回坐标」的函数——参照 `createStarPath` 写一个 `createHeartPath` 返回 `THREE.Vector3` 即可，其它逻辑保持不变。

适合放在哪些页面

适合品牌开屏动画、活动 Landing Page 首屏、节日主题页装饰、AR/VR 项目 Banner、游戏官网主视觉、社交平台点赞爆炸效果。下载源码后可作为独立特效模块或全屏首屏使用。