Three.js 宇宙星云特效 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用 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. 多层星云效果

多层不同频率的波叠加创造自然的星云纹理。

glsl
1
2
3
4
5
6
7
8
9
10
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. 星星闪烁效果

随机分布的星星带闪烁动画。

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
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. 星云颜色类型

三种经典星云配色。

glsl
1
2
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 编辑整理，如需转载，请注明出处。