星空粒子场

Three.js 星空粒子场特效
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用 Three.js 实现星空粒子场特效,具体要求:
**核心特效**
- 球体表面星星分布
- 闪烁动画效果
- 颜色渐变 (白/青/粉红)
- 脉冲呼吸效果
- 多参数可调
**场景与光照**
- 深蓝渐变背景
- 环境光 + 点光源
- 抗锯齿渲染
**交互与控制**
- OrbitControls 阻尼旋转
- GUI 面板实时调节
- 密度/大小/速度/颜色
**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- SphereGeometry 球体
- 噪声函数星星生成
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 球体形状 | SphereGeometry |
| 星星 | 噪声图案 | hash + smoothstep |
| 闪烁 | 逐星星动画 | twinkle = sin(time + random) |
| 颜色 | 三色混合 | mix(color1, color2, color3) |
| 控制 | GUI 面板 | 10个可调参数 |
🔧 核心技术点
1. 星星图案生成
为什么需要这个技术:用噪声函数在球面上生成自然的星星分布。
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
float hash(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
float noise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float a = hash(i);
float b = hash(i + vec2(1.0, 0.0));
// ...
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}
float starPattern = noise(starCoord);
float starDensity = step(1.0 - uStarDensity, starPattern);
float star = smoothstep(1.0 - uStarSize, 1.0, starPattern) * starDensity;
2. 闪烁效果
为什么需要这个技术:每颗星星独立闪烁,创造真实星空感。
glsl
1
2
float twinkle = sin(uTime * uTwinkleSpeed + vRandom * 10.0) * 0.5 + 0.5;
star *= twinkle;
3. 球面脉冲动画
为什么需要这个技术:整颗星球有呼吸般的膨胀效果。
glsl
1
2
vPulse = sin(uTime * 3.0) * 0.5 + 0.5;
newPosition *= 1.0 + vPulse * uPulse * 0.1;
4. 颜色混合
为什么需要这个技术:三种颜色的星星随机分布,创造多彩效果。
glsl
1
2
3
4
float colorMix1 = sin(uTime * 1.5 + vPosition.x * 2.0) * 0.5 + 0.5;
float colorMix2 = cos(uTime * 2.0 + vPosition.y * 2.0) * 0.5 + 0.5;
vec3 colorA = mix(uColor1, uColor2, colorMix1);
vec3 colorB = mix(colorA, uColor3, colorMix2);
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 星星过密 | 看不见形状 | 降低 uStarDensity |
| 闪烁过快 | 眼花 | 降低 uTwinkleSpeed |
| 性能问题 | 帧率低 | 降低几何体分段数 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 流星效果 | 添加拖尾 | ⭐⭐ |
| 星云背景 | 纹理替代 | ⭐ |
| 行星环 | TorusGeometry | ⭐⭐ |
| 星座连线 | LineSegments | ⭐⭐ |
| 3D 星空盒子 | CubeTexture | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!