Three.js 黑洞引力效果着色器 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt 复制代码

创建一个黑洞引力效果着色器，包含吸积盘和粒子效果，模拟黑洞的引力透镜和吸积现象，提供三种黑洞类型可选。

🖼️ 效果预览

🎮 案例演示

立即体验

📖 效果拆解

层次	视觉效果	技术实现
基础	八面体几何体	OctahedronGeometry
核心特效	引力场效果	多层正弦波叠加的引力场
增强细节	吸积盘	极坐标旋转的吸积盘效果
视觉效果	粒子系统	30个向黑洞坠落的粒子
交互控制	黑洞类型切换	橙色、红色、紫色三种黑洞

🔧 核心技术点

顶点着色器

glsl 复制代码

uniform float uTime;
uniform float uGravityStrength;
uniform float uAccretionDisk;
uniform float uEventHorizon;

void main() {
    vUv = uv;
    vPosition = position;
    vNormal = normal;
    
    // 黑洞引力效果
    float gravity = sin(position.x * 3.0 + uTime * uGravityStrength) * 
                   cos(position.y * 4.0 + uTime * uGravityStrength * 0.8) *
                   sin(position.z * 3.0 + uTime * uGravityStrength * 0.6);
    
    // 吸积盘效果
    float accretion = sin(position.x * 5.0 + uTime * uAccretionDisk * 2.0) *
                    cos(position.z * 5.0 + uTime * uAccretionDisk * 2.0);
    
    // 事件视界效果
    float horizon = sin(position.x * uEventHorizon * 6.0) *
                   cos(position.y * uEventHorizon * 8.0);
    
    vec3 newPosition = position + normal * (gravity + accretion * 0.5 + horizon * 0.3) * 0.2;
    
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

黑洞引力效果

glsl 复制代码

float blackholeGravity(vec2 uv, float strength) {
    float gravityField = 0.0;
    
    // 多层引力场
    gravityField += sin(uv.x * 4.0 + uTime * 0.3) * 
                   cos(uv.y * 6.0 + uTime * 0.5);
    gravityField += sin(uv.x * 6.0 + uTime * 0.7) * 
                   cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
    gravityField += sin(uv.x * 8.0 + uTime * 1.1) * 
                   cos(uv.y * 10.0 + uTime * 1.3) * 0.4;
    
    return gravityField * strength;
}

吸积盘效果

glsl 复制代码

float accretionDisk(vec2 uv, float intensity) {
    float diskField = 0.0;
    
    // 旋转吸积盘
    float angle = atan(uv.y - 0.5, uv.x - 0.5);
    float radius = distance(uv, vec2(0.5, 0.5));
    diskField += sin(angle * 8.0 + uTime * 2.0) * 
                cos(radius * 12.0 - uTime * 1.5) * intensity;
    
    return diskField;
}

粒子效果

glsl 复制代码

float particles(vec2 uv, float density) {
    if(!uShowParticles) return 0.0;
    
    float particleField = 0.0;
    for(int i = 0; i < 30; i++) {
        vec2 particlePos = vec2(
            noise(vec2(float(i) * 0.123, 0.456)),
            noise(vec2(float(i) * 0.456, 0.789))
        );
        float dist = distance(uv, particlePos);
        float particleSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.03 + 0.02;
        float particleLife = mod(uTime * 1.2 + float(i) * 12.0, 6.28);
        float particleIntensity = sin(particleLife) * 0.6 + 0.4;
        particleField += exp(-dist * 60.0) * particleIntensity * density;
    }
    return particleField;
}

💡 调试与优化

问题类型	表现形式	解决方案
引力过强	几何体变形过大	减小 uGravityStrength 值
吸积盘旋转过快	视觉混乱	减小 uAccretionDisk 值
粒子过多	性能下降	减少粒子数量 (30→15)
颜色过暗	效果不明显	增大 uGlowIntensity 值

🚀 扩展思路

变体效果	核心改动	难度
引力透镜	添加背景星空的扭曲效果	⭐⭐⭐
霍金辐射	添加黑洞辐射的视觉效果	⭐⭐⭐
喷流效果	添加黑洞两极的相对论性喷流	⭐⭐⭐
恒星吞噬	添加经过的恒星被撕裂的效果	⭐⭐⭐
事件视界	添加完全黑色的事件视界区域	⭐⭐

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