火焰效果

Three.js 火焰效果着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
使用 Three.js 实现火焰效果着色器,具体要求:
【核心特效】
- 多层噪声火焰变形
- 颜色渐变(底部红→顶部黄)
- 火花效果
【场景与光照】
- 纯黑色背景
- 添加混合模式
- 环境光照明
【交互与控制】
- OrbitControls 视角控制
- GUI 参数调节面板
【技术要求】
- Three.js 最新版本
- lil-gui 控制面板
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 平面几何体 | PlaneGeometry(4, 6, 64, 96) |
| 核心特效 | 火焰动态变形 | 多层噪声叠加 |
| 增强细节 | 颜色渐变 + 火花 | 分段颜色混合 |
| 交互层 | GUI 参数调节 | lil-gui |
🔧 核心技术点
1. 改进的噪声函数
glsl
1
2
3
4
5
6
7
8
9
10
float improvedNoise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float a = noise(i);
float b = noise(i + vec2(1.0, 0.0));
float c = noise(i + vec2(0.0, 1.0));
float d = noise(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}
2. 火焰变形
glsl
1
2
3
4
// 火焰高度变化
newPosition.z += vNoise * uFlameHeight * (1.0 - uv.y);
// 左右摆动
newPosition.x += sin(uTime * 3.0 + position.y * 5.0) * 0.2;
3. 颜色渐变
glsl
1
2
3
4
5
6
7
8
9
if(vHeight < 0.3) {
finalColor = uColor1;
} else if(vHeight < 0.6) {
float mixFactor = (vHeight - 0.3) / 0.3;
finalColor = mix(uColor1, uColor2, mixFactor);
} else {
float mixFactor = (vHeight - 0.6) / 0.4;
finalColor = mix(uColor2, uColor3, mixFactor);
}
4. 火花效果
glsl
1
2
3
4
float spark = sin(vPosition.x * 15.0 + uTime * 10.0) *
sin(vPosition.y * 12.0 + uTime * 8.0);
spark = max(0.0, spark) * 0.3;
finalColor += vec3(spark);
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 着色器编译失败 | 黑屏或报错 | 检查 GLSL 语法 |
| 性能问题 | 帧率下降 | 降低平面细分程度 |
| 火焰效果不自然 | 形状过于规则 | 增加噪声层数 |
| 颜色异常 | 颜色过渡不自然 | 调整颜色渐变参数 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 3D 火焰 | 使用粒子系统 | ⭐⭐⭐ |
| 火焰喷射 | 添加方向力 | ⭐⭐ |
| 燃烧动画 | 添加燃料消耗效果 | ⭐⭐⭐ |
| 多火焰 | 创建火焰组 | ⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!