Three.js 蜡烛火焰特效 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
使用 Three.js 实现逼真的蜡烛火焰特效，具体要求：

【核心特效】
- 双重火焰层叠
- 烛芯燃烧效果
- 烛光摇曳
- 火焰噪声变形

【场景与光照】
- 木桌背景纹理
- 蜡烛外壳 LatheGeometry
- 双面 ShaderMaterial

【交互与控制】
- 自动旋转相机
- 烛光 PointLight 照明
- 火焰自然摇曳

【技术要求】
- Three.js 版本 (ES Module)
- LatheGeometry 蜡烛轮廓
- ShaderMaterial 火焰
- 噪声函数变形

🖼️ 效果预览

蜡烛火焰特效

🎮 案例演示

立即体验

📖 效果拆解

层次 视觉效果 技术实现
基础 蜡烛外形 LatheGeometry
火焰 双层球体 FrontSide + BackSide
变形 噪声 + sin 顶点着色器
颜色 热力图渐变 heatmapGradient()
照明 PointLight x2 摇曳动画

🔧 核心技术点

1. 蜡烛几何体

用 LatheGeometry 创建旋转对称的蜡烛外形。

javascript
1
2
3
var casePath = new THREE.Path();
casePath.absarc(1.5, 0.5, 0.5, Math.PI * 1.5, Math.PI * 2);
var caseGeo = new THREE.LatheGeometry(casePath.getPoints(), 64);

2. 火焰形状变形

用噪声创造自然的火焰跳动。

glsl
1
2
pos.x += noise(vec2(time * 2., (position.y - time) * 4.0)) * hValue * 0.0312;
pos.z += noise(vec2((position.y - time) * 4.0, time * 2.)) * hValue * 0.0312;

3. 火焰高度动画

火焰形状随高度变化。

glsl
1
2
3
pos.y *= 1.0 + (cos((posXZlen + 0.25) * 3.1415926) * 0.25
    + noise(vec2(0, time)) * 0.125
    + noise(vec2(position.x + time, position.z + time)) * 0.5) * position.y;

4. 热力图颜色

模拟火焰从底部蓝色到顶部橙色的渐变。

glsl
1
2
3
4
5
6
vec3 heatmapGradient(float t) {
    return clamp((pow(t, 1.5) * 0.8 + 0.2) *
        vec3(smoothstep(0.0, 0.35, t) + t * 0.5,
             smoothstep(0.5, 1.0, t),
             max(1.0 - t * 1.7, t * 7.0 - 6.0)), 0.0, 1.0);
}

5. 烛光摇曳

用 sin 波模拟烛光闪烁。

javascript
1
2
candleLight2.position.x = Math.sin(time * Math.PI) * 0.25;
candleLight2.intensity = 2 + Math.sin(time * Math.PI * 2) * Math.cos(time * Math.PI * 1.5) * 0.25;

💡 调试与优化

问题类型 表现形式 解决方案
火焰过胖 不像火焰 减小 scale vec3 x/z
颜色过暗 不够明亮 增大颜色强度
变形过剧 闪烁异常 减小噪声系数

🚀 扩展思路

变体效果 核心改动 难度
多蜡烛 添加更多蜡烛 ⭐
风吹效果 添加横向力 ⭐
熔蜡效果 添加蜡滴 ⭐⭐
灭蜡烛 烟雾效果 ⭐⭐
生日蛋糕 3D 蛋糕 + 蜡烛 ⭐⭐

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