Three.js 烟雾特效

🎯 提示词

PROMPT
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. 多层噪声组合

为什么需要这个技术:单层噪声过于单调,多层叠加创造自然的烟雾纹理。

GLSL
1
2
3
4
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. 烟雾上升动画

为什么需要这个技术:让烟雾看起来像是在自然上升飘散。

GLSL
1
2
3
vec2 noiseCoord = uv * uNoiseScale;
noiseCoord.y -= uTime * uRiseSpeed;
noiseCoord.x += uTime * uSpeed;

3. 边缘衰减

为什么需要这个技术:烟雾在载体边缘逐渐透明消失。

GLSL
1
2
3
float edgeFade = 1.0 - length(vUv - 0.5) * 2.0;
edgeFade = smoothstep(0.0, 1.0, edgeFade);
density *= edgeFade;

4. 湍流扰动

为什么需要这个技术:让烟雾运动更自然,不规则。

GLSL
1
2
3
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 编辑整理,如需转载,请注明出处。