超酷烟雾

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 实现超酷烟雾特效,具体要求:
【核心特效】
- 多层噪声叠加
- 双色渐变混合
- 边缘衰减效果
- 发光闪烁效果
【场景与光照】
- 黑色背景
- 加法混合发光
- 平面旋转水平
【交互与控制】
- OrbitControls 阻尼旋转
- GUI 面板实时调节
- 颜色/密度/速度/强度
【技术要求】
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- PlaneGeometry 4x4
- 简单噪声函数
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 烟雾平面 | PlaneGeometry |
| 噪声 | 两层叠加 | noise() + noise()*2.0 |
| 变形 | Z 轴偏移 | position.z += vNoise * 0.8 |
| 边缘 | 径向衰减 | 1.0 - length(vUv - 0.5) * 2.0 |
| 控制 | GUI 面板 | 8个参数 |
🔧 核心技术点
1. 简单噪声生成
用 sin 函数模拟简单的噪声效果。
glsl
1
2
3
float noise(vec2 p) {
return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}
2. 双层噪声叠加
两层不同频率的噪声叠加增加细节。
glsl
1
2
3
float noise1 = noise(noiseCoord);
float noise2 = noise(noiseCoord * 2.0 + 10.0);
vNoise = noise1 * 0.7 + noise2 * 0.3;
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
float colorMix = sin(uTime * 1.5 + vPosition.x * 2.0) * 0.5 + 0.5;
vec3 finalColor = mix(uColor1, uColor2, colorMix);
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 噪声过密 | 细节丢失 | 减小 uNoiseScale |
| 边缘突变 | 生硬过渡 | 增大 smoothstep 范围 |
| 闪烁过频 | 眼花 | 减小 uSpeed |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 彩色烟雾 | 更多颜色 | ⭐ |
| 烟雾粒子 | 粒子系统 | ⭐⭐ |
| 流动烟雾 | 方向性流动 | ⭐ |
| 3D 烟雾 | 深度效果 | ⭐⭐ |
| 烟雾文字 | 遮罩文字 | ⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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