Three.js 蜡烛火焰特效
🎯 提示词
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
使用 Three.js 实现逼真的蜡烛火焰特效,具体要求:
**核心特效**
- 双重火焰层叠
- 烛芯燃烧效果
- 烛光摇曳
- 火焰噪声变形
**场景与光照**
- 木桌背景纹理
- 蜡烛外壳 LatheGeometry
- 双面 ShaderMaterial
**交互与控制**
- 自动旋转相机
- 烛光 PointLight 照明
- 火焰自然摇曳
**技术要求**
- Three.js 版本 (ES Module)
- LatheGeometry 蜡烛轮廓
- ShaderMaterial 火焰
- 噪声函数变形
📖 效果拆解
| 层次 |
视觉效果 |
技术实现 |
| 基础 |
蜡烛外形 |
LatheGeometry |
| 火焰 |
双层球体 |
FrontSide + BackSide |
| 变形 |
噪声 + sin |
顶点着色器 |
| 颜色 |
热力图渐变 |
heatmapGradient() |
| 照明 |
PointLight x2 |
摇曳动画 |
🔧 核心技术点
1. 蜡烛几何体
为什么需要这个技术:用 LatheGeometry 创建旋转对称的蜡烛外形。
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. 火焰形状变形
为什么需要这个技术:用噪声创造自然的火焰跳动。
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. 火焰高度动画
为什么需要这个技术:火焰形状随高度变化。
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. 热力图颜色
为什么需要这个技术:模拟火焰从底部蓝色到顶部橙色的渐变。
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 波模拟烛光闪烁。
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 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!