Three.js 宇宙星云特效
🎯 提示词
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
使用 Three.js 实现宇宙星云特效,具体要求:
**核心特效**
- 多层星云叠加
- 星星闪烁效果
- 三种星云类型 (猎户座/蟹状/猫眼)
- 湍流扰动效果
- 7个实时参数
**场景与光照**
- 深蓝径向背景
- 加法混合发光
- 球体缓慢旋转
**交互与控制**
- OrbitControls 阻尼旋转
- GUI 面板实时调节
- 星云密度/演化速度/星星密度
**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- SphereGeometry 球体
- 多层 sin/cos 叠加
📖 效果拆解
| 层次 |
视觉效果 |
技术实现 |
| 基础 |
星云球体 |
SphereGeometry |
| 星云 |
多层正弦叠加 |
sin * cos 组合 |
| 星星 |
随机分布闪烁 |
exp(-dist) 衰减 |
| 湍流 |
径向 sin 波 |
sin(length(uv) * 5.0) |
| 控制 |
GUI 面板 |
7个实时参数 |
🔧 核心技术点
1. 多层星云效果
为什么需要这个技术:多层不同频率的波叠加创造自然的星云纹理。
float nebula(vec2 uv, float density) {
float nebulaField = 0.0;
nebulaField += sin(uv.x * 6.0 + uTime * 0.3) *
cos(uv.y * 6.0 + uTime * 0.3);
nebulaField += sin(uv.x * 8.0 + uTime * 0.5) *
cos(uv.y * 8.0 + uTime * 0.5) * 0.7;
nebulaField += sin(uv.x * 12.0 + uTime * 0.7) *
cos(uv.y * 12.0 + uTime * 0.7) * 0.4;
return nebulaField * density;
}
2. 星星闪烁效果
为什么需要这个技术:随机分布的星星带闪烁动画。
float stars(vec2 uv, float density) {
float starField = 0.0;
for(int i = 0; i < 20; i++) {
vec2 starPos = vec2(
noise(vec2(float(i) * 0.123, 0.456)),
noise(vec2(float(i) * 0.456, 0.789))
);
float dist = distance(uv, starPos);
float twinkle = sin(uTime * 2.0 + float(i) * 10.0) * 0.5 + 0.5;
starField += exp(-dist * 30.0) * twinkle * density;
}
return starField;
}
3. 星云颜色类型
为什么需要这个技术:三种经典星云配色。
if(type == 0) return vec3(1.0, 0.3, 0.2);
else if(type == 1) return vec3(0.2, 0.5, 1.0);
else return vec3(0.3, 1.0, 0.4);
💡 调试与优化
| 问题类型 |
表现形式 |
解决方案 |
| 星云过密 |
细节糊掉 |
降低 nebulaDensity |
| 星星过多 |
喧宾夺主 |
降低 starDensity |
| 旋转过快 |
头晕 |
减小 rotation 增量 |
🚀 扩展思路
| 变体效果 |
核心改动 |
难度 |
| 星云+行星 |
添加球体叠加 |
⭐ |
| 动态星空 |
添加更多星星 |
⭐ |
| 彗星效果 |
粒子轨迹 |
⭐⭐ |
| 引力透镜 |
扭曲效果 |
⭐⭐ |
| 多星系统 |
多个星云叠加 |
⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!