烟雾特效

Three.js 烟雾特效 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用 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 编辑整理,如需转载,请注明出处。







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