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
使用 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 编辑整理，如需转载，请注明出处。