Three.js 银河漩涡效果着色器 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
创建一个银河漩涡效果着色器,包含星星、星云和螺旋臂效果,支持漩涡强度、旋转速度调节,提供三种银河颜色类型。

🖼️ 效果预览

银河漩涡效果着色器

🎮 案例演示

立即体验


效果描述

这是一个模拟银河系漩涡结构的视觉效果,通过多层漩涡场、星星粒子和星云效果创造壮观的星系景观。

效果特性

  • 多层漩涡场:3层不同参数的漩涡叠加
  • 星星粒子系统:30个动态星星粒子
  • 星云效果:5个大型星云团
  • 螺旋臂:可调节的螺旋臂效果
  • 三种银河类型:紫色、蓝色、绿色银河可选

参数调节

参数 默认值 范围 说明
漩涡强度 0.8 0.1-1.2 漩涡的扭曲程度
旋转速度 0.6 0.1-1.0 银河旋转的速度
星星密度 0.7 0.1-1.0 星星的密度
发光强度 1.2 0.1-1.8 整体发光强度
螺旋臂 0.7 0.1-1.0 螺旋臂的明显程度
显示星云 true boolean 是否显示星云效果

核心代码解析

顶点着色器

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
uniform float uTime;
uniform float uVortexStrength;
uniform float uRotationSpeed;
uniform float uSpiralArms;

void main() {
    vUv = uv;
    vPosition = position;
    vNormal = normal;

    // 漩涡效果
    float vortex = sin(position.x * 3.0 + uTime * uVortexStrength) *
                  cos(position.y * 4.0 + uTime * uVortexStrength * 0.8) *
                  sin(position.z * 3.0 + uTime * uVortexStrength * 0.6);

    // 旋转效果
    float rotation = sin(position.x * 5.0 + uTime * uRotationSpeed * 2.0) *
                    cos(position.z * 5.0 + uTime * uRotationSpeed * 2.0);

    // 螺旋臂效果
    float spiral = sin(position.x * uSpiralArms * 8.0) *
                  cos(position.y * uSpiralArms * 10.0);

    vec3 newPosition = position + normal * (vortex + rotation * 0.5 + spiral * 0.3) * 0.2;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

银河漩涡效果

glsl
1
2
3
4
5
6
7
8
9
10
11
float galaxy(vec2 uv, float strength) {
    float galaxyField = 0.0;

    // 多层漩涡
    galaxyField += sin(uv.x * 4.0 + uTime * 0.2) *
                  cos(uv.y * 6.0 + uTime * 0.3);
    galaxyField += sin(uv.x * 6.0 + uTime * 0.4) *
                  cos(uv.y * 8.0 + uTime * 0.5) * 0.7;
    galaxyField += sin(uv.x * 8.0 + uTime * 0.6) *
                  cos(uv.y * 10.0 + uTime * 0.7) * 0.4;

    return galaxyField * strength;
}

星星效果

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float stars(vec2 uv, float density) {
    float starField = 0.0;
    for(int i = 0; i < 30; 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 starSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.06 + 0.03;
        float starLife = mod(uTime * 1.5 + float(i) * 8.0, 6.28);
        float starIntensity = sin(starLife) * 0.6 + 0.4;
        starField += exp(-dist * 40.0) * starIntensity * density;
    }
    return starField;
}

星云效果

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
float nebula(vec2 uv, float intensity) {
    if(!uShowNebula) return 0.0;

    float nebulaField = 0.0;
    for(int i = 0; i < 5; i++) {
        vec2 nebulaPos = vec2(
            noise(vec2(float(i) * 0.567, 0.234)),
            noise(vec2(float(i) * 0.234, 0.567))
        );
        float dist = distance(uv, nebulaPos);
        float nebulaSize = noise(vec2(float(i) * 0.345, 0.678)) * 0.3 + 0.2;
        float nebulaLife = mod(uTime * 0.5 + float(i) * 10.0, 6.28);
        float nebulaIntensity = sin(nebulaLife) * 0.4 + 0.6;
        nebulaField += exp(-dist * 8.0) * nebulaIntensity * intensity;
    }
    return nebulaField;
}

Uniforms

javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
    uTime: { value: 0.0 },
    uVortexStrength: { value: 0.8 },
    uRotationSpeed: { value: 0.6 },
    uStarDensity: { value: 0.7 },
    uGlowIntensity: { value: 1.2 },
    uSpiralArms: { value: 0.7 },
    uGalaxyType: { value: 0 },
    uShowNebula: { value: true }
}

技术亮点

  1. 多层漩涡系统:3层不同参数的漩涡叠加创造复杂银河结构
  2. 星星闪烁:30个星星粒子带有独立的生命周期的闪烁
  3. 星云叠加:大型星云团使用更柔和的衰减创造烟雾效果
  4. 螺旋臂模拟:正弦函数组合模拟螺旋臂的弯曲
  5. 颜色渐变:三种银河颜色适合不同宇宙场景

调试技巧

  1. 漩涡强度:过高可能导致结构失真
  2. 星星数量:减少星星数量可显著提升性能
  3. 星云大小:调整星云size参数改变覆盖范围
  4. 旋转同步:漩涡和旋转速度需协调调整
  5. 颜色混合:可通过修改getGalaxyType创造混合色银河

扩展方向

  1. 棒旋星系:添加中心棒状结构
  2. 卫星星系:添加围绕主星系的小型卫星星系
  3. 星系碰撞:实现两个星系接近和合并的动画
  4. 恒星形成区:添加明亮的恒星形成区效果
  5. 黑洞效果:添加中心超大质量黑洞的引力透镜效果

本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。