Three.js 粒子星球效果实现

我是玄猫，较擅长用AI提效。

这个号讲一件事：用AI降低门槛，让想法更容易落地。

这篇文章记录一下用 Three.js 做粒子星球的过程。

最近在做 AI造物网站的时候，想要一个有视觉冲击力的首屏效果。最终选择了用 Three.js 实现一个类似土星的粒子星球。

最终效果

先看效果：一个由 10 万+ 粒子组成的星球，带有光环，支持鼠标交互和滚动缩放。整体风格偏 Web3 / 科技感。

最终效果

核心思路

整个效果分为三个部分：

球体核心 - 2万个粒子构成的球形
光环系统 - 10万个粒子，开普勒轨道运动
后期处理 - Bloom 发光效果

粒子系统实现

Three.js 中用 BufferGeometry 来处理大量粒子会比较高效：

const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);

// 球面均匀分布
for (let i = 0; i < particleCount; i++) {
    const phi = Math.acos(2 * Math.random() - 1);
    const theta = Math.random() * Math.PI * 2;

    positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
    positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
    positions[i * 3 + 2] = radius * Math.cos(phi);
}

geometry.setAttribute('position',
    new THREE.BufferAttribute(positions, 3)
);

关键点是使用球坐标系来保证粒子均匀分布在球面上，而不是简单的随机 xyz。

开普勒轨道

光环粒子的运动遵循开普勒定律 —— 离中心越近，转得越快：

// 角速度与半径的关系
const keplerConstant = 3;
const angularVelocity = Math.pow(radius, -keplerConstant / 2);

// 每帧更新位置
theta += angularVelocity * deltaTime;

这个细节让光环看起来更真实，而不是整体刚性旋转。

Bloom 后期处理

发光效果使用 Three.js 的 UnrealBloomPass：

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(width, height),
    1.5,    // strength 强度
    0.4,    // radius 扩散半径
    0.1     // threshold 亮度阈值
);

composer.addPass(bloomPass);

调参技巧：
- strength 控制发光强度，太高会过曝
- radius 控制光晕扩散范围
- threshold 控制什么亮度以上的像素才发光

性能优化

移动端需要降低粒子数量，否则会卡：

const isMobile = window.innerWidth <= 768;
const CONFIG = {
    coreParticles: isMobile ? 8000 : 20000,
    ringParticles: isMobile ? 40000 : 100000,
};

另外还做了：
- 相机距离调整（移动端拉远一点）
- Bloom 强度降低
- 触摸事件适配

踩坑记录

Q: 滚动时相机跳动？

移动端刚开始滑动时，相机位置会突然跳一下。原因是 targetCameraZ 初始值写死了桌面端的值，但实际相机初始位置是移动端的值。

Q: 粒子闪烁？

粒子使用 AdditiveBlending 时，如果 alpha 值过高，重叠区域会过曝闪烁。解决方法是降低单个粒子的 opacity。

小结

整个效果大概 500 行代码，核心是理解：
1. Three.js 的粒子系统（BufferGeometry + Points）
2. 后期处理管线（EffectComposer）
3. 基础物理（开普勒定律）

完整代码在网站源码里，有兴趣可以 F12 看看。

下一篇可能会写移动端适配踩的坑，或者聊聊这个网站的整体设计思路。

关注公众号：玄的AI造物间

探索 AI 的边界，记录创造的过程