熔岩流动效果
🎯 提示词
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
使用 Three.js 实现熔岩流动效果,具体要求:
【核心特效】
- 分形噪声驱动的流动动画
- 温度相关的颜色映射
- 发光效果模拟
【场景与光照】
- 纯黑色背景
- 自发光效果
- 无需传统光源
【交互与控制】
- OrbitControls 视角控制
- GUI 参数调节面板
- GSAP 自动旋转动画
【技术要求】
- Three.js 最新版本
- lil-gui 控制面板
- GSAP 动画库
📖 效果拆解
| 层次 |
视觉效果 |
技术实现 |
| 基础 |
球体几何体 |
SphereGeometry(2, 64, 64) |
| 核心特效 |
流动的熔岩纹理 |
分形噪声 + 颜色映射 |
| 增强细节 |
发光边缘 |
smoothstep 阈值控制 |
| 动画层 |
自动旋转 |
GSAP timeline |
🔧 核心技术点
1. 分形噪声生成
使用经典的随机噪声函数构建多层分形。
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. 流动效果计算
通过噪声偏移创建流动动画。
vec2 flow = vec2(
fbm(uv * 2.0 + time * flowSpeed),
fbm(uv * 2.0 - time * flowSpeed * 0.7)
);
3. 熔岩颜色映射
根据热力值映射到不同温度的颜色。
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 旋转动画
gsap.to(_primitive.rotation, {
y: Math.PI * 2,
duration: 20,
repeat: -1,
ease: "none"
});
💡 调试与优化
| 问题类型 |
表现形式 |
解决方案 |
| 着色器编译失败 |
黑屏或报错 |
检查 GLSL 语法和 uniform 定义 |
| 性能问题 |
帧率下降 |
降低球体细分或噪声迭代次数 |
| 颜色异常 |
颜色不自然 |
调整颜色映射曲线 |
| 动画卡顿 |
旋转不流畅 |
检查 GSAP 配置和渲染循环 |
🚀 扩展思路
| 变体效果 |
核心改动 |
难度 |
| 火山喷发 |
添加粒子系统模拟喷发效果 |
⭐⭐⭐ |
| 熔岩池 |
将球体改为平面,实现熔岩池效果 |
⭐ |
| 温度变化 |
动态改变温度参数 |
⭐⭐ |
| 多色熔岩 |
添加更多颜色过渡 |
⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!