Three.js 极光效果着色器 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt 复制代码

创建一个逼真的极光效果着色器，使用多层正弦波和余弦波叠加，配合可调节的流动速度、强度、波动频率参数，支持自定义极光颜色。

🖼️ 效果预览

🎮 案例演示

立即体验

📖 效果拆解

层次	视觉效果	技术实现
基础	全屏平面	PlaneGeometry
核心特效	多层极光带	多层正弦波叠加
增强细节	颜色渐变	绿、蓝、紫三色动态渐变
视觉效果	发光脉冲	极光发光效果的脉冲动画
附加效果	星空背景	点缀的星光效果

🔧 核心技术点

顶点着色器

glsl 复制代码

varying vec2 vUv;
varying vec3 vPosition;

void main() {
    vUv = uv;
    vPosition = position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

极光流动函数

glsl 复制代码

float auroraFlow(vec2 uv, float time) {
    float flow = 0.0;
    
    // 创建多层极光带
    for (int i = 0; i < 3; i++) {
        float layer = float(i) * 0.3;
        float speed = flowSpeed * (1.0 + layer * 0.5);
        
        // 水平流动效果
        float xFlow = sin(uv.x * waveFrequency + time * speed + layer * 3.14);
        
        // 垂直波动效果
        float yWave = sin(uv.y * 10.0 + time * speed * 0.5) * 0.5 + 0.5;
        
        // 组合效果
        flow += (xFlow * yWave) * (1.0 - layer * 0.3);
    }
    
    return flow * 0.5 + 0.5;
}

极光颜色映射

glsl 复制代码

vec3 auroraColorMap(float intensity) {
    vec3 color1 = vec3(0.0, 0.8, 0.4);  // 绿色
    vec3 color2 = vec3(0.2, 0.4, 1.0);  // 蓝色
    vec3 color3 = vec3(0.8, 0.2, 0.8);  // 紫色
    
    if (intensity < 0.3) {
        return mix(color1, color2, intensity / 0.3);
    } else if (intensity < 0.6) {
        return mix(color2, color3, (intensity - 0.3) / 0.3);
    } else {
        return color3;
    }
}

Uniforms

javascript 复制代码

uniforms: {
    time: { value: 0 },
    resolution: { value: new THREE.Vector2(_width, _height) },
    flowSpeed: { value: 1.0 },
    intensity: { value: 1.2 },
    waveFrequency: { value: 3.0 },
    auroraColor: { value: new THREE.Color(0xffffff) }
}

💡 调试与优化

问题类型	表现形式	解决方案
流动不明显	效果微弱	增大 flowSpeed 值
颜色过渡生硬	颜色跳跃	调整阈值（0.3 和 0.6）
星光过多	画面杂乱	降低星星振幅
性能问题	帧率下降	减少迭代次数或降低几何体分段数

🚀 扩展思路

变体效果	核心改动	难度
动态天空	添加渐变天空背景	⭐⭐
极光动画	添加极光带的形态变化	⭐⭐⭐
3D极光	将效果应用到球形天空盒	⭐⭐⭐
相机跟随	添加第一人称视角漫游	⭐⭐

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。