Three.js 熔岩流动效果 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用 Three.js 实现熔岩流动效果，具体要求：

【核心特效】
- 分形噪声驱动的流动动画
- 温度相关的颜色映射
- 发光效果模拟

【场景与光照】
- 纯黑色背景
- 自发光效果
- 无需传统光源

【交互与控制】
- OrbitControls 视角控制
- GUI 参数调节面板
- GSAP 自动旋转动画

【技术要求】
- Three.js 最新版本
- lil-gui 控制面板
- GSAP 动画库

🖼️ 效果预览

Three.js 熔岩流动效果

🎮 案例演示

立即体验

📖 效果拆解

层次 视觉效果 技术实现
基础 球体几何体 SphereGeometry(2, 64, 64)
核心特效 流动的熔岩纹理 分形噪声 + 颜色映射
增强细节 发光边缘 smoothstep 阈值控制
动画层 自动旋转 GSAP timeline

🔧 核心技术点

1. 分形噪声生成

使用经典的随机噪声函数构建多层分形。

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
float noise(vec2 p) {
    return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}

float fbm(vec2 p) {
    float value = 0.0;
    float amplitude = 0.5;
    float frequency = 1.0;
    
    for (int i = 0; i < 4; i++) {
        value += amplitude * noise(p * frequency);
        amplitude *= 0.5;
        frequency *= 2.0;
    }
    return value;
}

2. 流动效果计算

通过噪声偏移创建流动动画。

glsl
1
2
3
4
vec2 flow = vec2(
    fbm(uv * 2.0 + time * flowSpeed),
    fbm(uv * 2.0 - time * flowSpeed * 0.7)
);

3. 熔岩颜色映射

根据热力值映射到不同温度的颜色。

glsl
1
2
3
4
5
6
7
8
9
10
11
vec3 lavaColor(float heat) {
    vec3 coolColor = vec3(0.8, 0.2, 0.0);  // 暗红色
    vec3 hotColor = vec3(1.0, 0.8, 0.2);   // 亮黄色
    
    if (heat < 0.3) {
        return coolColor;
    } else if (heat < 0.6) {
        return mix(coolColor, vec3(1.0, 0.5, 0.0), (heat - 0.3) / 0.3);
    } else {
        return mix(vec3(1.0, 0.5, 0.0), hotColor, (heat - 0.6) / 0.4);
    }
}

4. GSAP 旋转动画

javascript
1
2
3
4
5
6
gsap.to(_primitive.rotation, {
    y: Math.PI * 2,
    duration: 20,
    repeat: -1,
    ease: "none"
});

💡 调试与优化

问题类型 表现形式 解决方案
着色器编译失败 黑屏或报错 检查 GLSL 语法和 uniform 定义
性能问题 帧率下降 降低球体细分或噪声迭代次数
颜色异常 颜色不自然 调整颜色映射曲线
动画卡顿 旋转不流畅 检查 GSAP 配置和渲染循环

🚀 扩展思路

变体效果 核心改动 难度
火山喷发 添加粒子系统模拟喷发效果 ⭐⭐⭐
熔岩池 将球体改为平面，实现熔岩池效果 ⭐
温度变化 动态改变温度参数 ⭐⭐
多色熔岩 添加更多颜色过渡 ⭐⭐

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