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
24
使用 Three.js 实现逼真的烟雾上升特效,具体要求:
**核心特效**
- 多层噪声叠加
- 烟雾上升动画
- 边缘衰减效果
- 颜色变化动态
- 湍流扰动
**场景与光照**
- 深色背景
- AmbientLight + DirectionalLight
- 水平平面承载
**交互与控制**
- OrbitControls 阻尼旋转
- GUI 面板实时调节
- 7个可调参数
**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- PlaneGeometry 载体
- 多层噪声 + 湍流
📖 效果拆解
| 层次 |
视觉效果 |
技术实现 |
| 基础 |
平面烟雾载体 |
PlaneGeometry 旋转 |
| 烟雾 |
多层噪声 |
improvedNoise 组合 |
| 动画 |
持续上升 |
uTime 驱动 |
| 边缘 |
淡出衰减 |
edgeFade smoothstep |
| 控制 |
GUI 面板 |
7个参数实时调节 |
🔧 核心技术点
1. 多层噪声组合
为什么需要这个技术:单层噪声过于单调,多层叠加创造自然的烟雾纹理。
float noise1 = improvedNoise(noiseCoord);
float noise2 = improvedNoise(noiseCoord * 2.0 + 10.0);
float noise3 = improvedNoise(noiseCoord * 4.0 + 20.0);
vNoise = noise1 * 0.6 + noise2 * 0.3 + noise3 * 0.1;
2. 烟雾上升动画
为什么需要这个技术:让烟雾看起来像是在自然上升飘散。
vec2 noiseCoord = uv * uNoiseScale;
noiseCoord.y -= uTime * uRiseSpeed;
noiseCoord.x += uTime * uSpeed;
3. 边缘衰减
为什么需要这个技术:烟雾在载体边缘逐渐透明消失。
float edgeFade = 1.0 - length(vUv - 0.5) * 2.0;
edgeFade = smoothstep(0.0, 1.0, edgeFade);
density *= edgeFade;
4. 湍流扰动
为什么需要这个技术:让烟雾运动更自然,不规则。
float turbulence = sin(vNoise * 10.0 + uTime * 3.0) * uTurbulence;
newPosition.x += turbulence * 0.1;
newPosition.z += vNoise * 0.5 + turbulence * 0.2;
💡 调试与优化
| 问题类型 |
表现形式 |
解决方案 |
| 烟雾变形 |
几何体穿插 |
调整 plane 位置 |
| 性能问题 |
帧率低 |
减少 plane 分段数 |
| 烟雾太薄 |
看不清 |
增加 uDensity |
🚀 扩展思路
| 变体效果 |
核心改动 |
难度 |
| 彩色烟雾 |
多色渐变 |
⭐ |
| 火焰效果 |
改颜色和形状 |
⭐ |
| 爆炸烟雾 |
径向扩散 |
⭐⭐ |
| 流动云层 |
改变方向 |
⭐ |
| 3D 体积雾 |
多层叠加 |
⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!