Three.js 粒子星系：从曲线到有机质感的探索

从曲线到粒子

最初版本用 BufferGeometry 画出了完美的螺旋曲线，干净、精准，但用户反馈"太像 logo，缺少宇宙的有机感"。

曲线版的问题：太规整、太干净、像工业设计产品，不像真正的星系。

粒子系统方案

核心参数

const params = {
  count: 150000,      // 粒子数量
  size: 0.02,         // 粒子大小
  radius: 5,          // 星系半径
  branches: 5,        // 旋臂数量
  spin: 1,            // 旋转强度
  randomness: 0.5,    // 随机扩散
  power: 3,           // 聚集强度
  insideColor: '#ff6030',   // 内核暖色
  outsideColor: '#1b3984',  // 边缘冷色
}

关键经验

1. 幂函数控制聚集：Math.pow(randomnessPower, 3) 让粒子在内核更密集

2. 双色渐变：内核用暖色（橙/白），边缘用冷色（蓝/紫），模拟真实星系光谱

3. 透明度混合：depthWrite: false + transparent: true 实现粒子叠加光效

配色迭代

| 版本 | 主色 | 辅色 | 效果 |

|------|------|------|------|

| v1 | 纯白 | 蓝 | 太单调 |

| v2 | 绿 + 白 | 红/橙/蓝 | 抖音星轨风格 |

| v3 | 橙 + 白 | 蓝紫 | 接近真实星系 |

---

粒子特效源码已打包，关注后续更新获取。

---

原文链接：https://wenyiblog.top/2026/06/threejs-particle-galaxy/

首发于文艺技术笔记（wenyiblog.top），转载请注明出处。