Three.js Fog 组件知识整理

1. Fog 组件简介

Fog（雾）用于在 Three.js 场景中创建大气效果，模拟远处物体在雾中的模糊感。它可以增强景深，提高场景的真实感，并优化性能（远处物体可被雾隐藏，减少渲染压力）。

Three.js 提供了 两种雾效：

1. THREE.Fog - 线性雾，随距离均匀加深。
2. THREE.FogExp2 - 指数雾，随距离指数增长，更自然。

---

2. 线性雾（THREE.Fog）

2.1 语法

const fog = new THREE.Fog(color, near, far);
scene.fog = fog;

• color：雾的颜色（例如 0xaaaaaa）。
• near：开始出现雾的距离（从摄像机开始计算）。
• far：雾达到完全覆盖的距离（超出此距离的物体完全被雾遮挡）。

2.2 示例

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xaaaaaa, 5, 20);

• 5 以内无雾，5-20 之间物体逐渐被雾覆盖，20 以外完全被雾遮挡。

2.3 线性雾特点

✅ 适合大场景（如森林、城市、山脉）。
✅ 可控性高（可以精确设定雾的范围）。
❌ 较生硬（雾的变化是线性的，可能不够真实）。

---

3. 指数雾（THREE.FogExp2）

3.1 语法

const fogExp2 = new THREE.FogExp2(color, density);
scene.fog = fogExp2;

• color：雾的颜色。
• density：雾的浓度（数值越大，雾越浓）。

3.2 示例

scene.fog = new THREE.FogExp2(0xaaaaaa, 0.05);

• density = 0.05：随着距离增加，物体逐渐被雾覆盖，越远雾越浓。

3.3 指数雾特点

✅ 更真实（雾的浓度随距离指数增加）。
✅ 适合小型场景（如烟雾、尘雾、室内霾）。
❌ 难以控制（没有 near 和 far，只能调整 density）。

---

4. Fog 与材质

• 雾的颜色会影响受雾影响的物体。
• 大多数材质支持雾（如 MeshStandardMaterial）。
• 特殊材质不受雾影响：

• • MeshBasicMaterial（基础材质，不受灯光和雾影响）
  • ShaderMaterial（自定义着色器时需手动实现雾效）

4.1 开启雾影响

const material = new THREE.MeshStandardMaterial({ color: 0xff0000, fog: true });

4.2 禁用雾影响

const material = new THREE.MeshStandardMaterial({ color: 0xff0000, fog: false });

fog: false 时，该物体不会被雾影响。

---

5. 动态调整雾

可以使用 dat.GUI 控制雾的参数：

const gui = new dat.GUI();
const fog = new THREE.Fog(0xaaaaaa, 5, 20);
scene.fog = fog;

gui.addColor(fog, 'color');
gui.add(fog, 'near', 1, 50);
gui.add(fog, 'far', 1, 100);

这样可以在运行时实时调整雾的颜色和范围。

---

6. 结合天空（Sky）和雾

如果场景有 Sky 组件，雾的颜色应匹配天空颜色：

scene.fog = new THREE.Fog(0x87CEEB, 10, 50); // 颜色接近天空

这样可以让雾和天空融合，减少突兀感。

---

7. 结合灯光和阴影

• 方向光（DirectionalLight）：雾会影响远处光照，远处物体更暗。
• 点光源（PointLight）/聚光灯（SpotLight）：灯光在雾中会形成光束效果（如雾灯）。
• 阴影：如果雾太浓，阴影可能会变得不明显。

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);

在雾中添加灯光，可以制造神秘的光束效果。

---

8. 结合后处理（PostProcessing）

后处理可以增强雾效果，如体积光、景深（DOF）：

1. 使用 UnrealBloomPass 增强雾中的光照：

const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.5, 0.4, 0.85);
composer.addPass(bloomPass);

1. 使用 BokehPass 增强远处的虚化效果：

const bokehPass = new BokehPass(scene, camera, {
    focus: 10.0,
    aperture: 0.025,
    maxblur: 0.01
});
composer.addPass(bokehPass);

结合后处理，可以让雾更加真实，增强沉浸感。

---

9. 可能遇到的问题

9.1 雾没有效果

• 检查是否已赋值给 scene.fog：

console.log(scene.fog);

• 确保使用支持雾的材质：

console.log(material.fog);  // true 才会受雾影响

9.2 雾影响过强/过弱

• 线性雾：调整 near 和 far 之间的比例。
• 指数雾：调整 density 以适应场景大小。

---

10. 总结

类型	适用场景	控制参数	适用材质	优缺点
Fog （线性雾）	大型场景（森林、城市、山脉）	near / far	大多数材质（除 MeshBasicMaterial ）	✅ 可控性强，❌ 变化较生硬
FogExp2 （指数雾）	小型场景（烟雾、尘埃、室内）	density	大多数材质	✅ 真实感强，❌ 难以精确控制

最佳实践

• 远景雾：FogExp2 更真实，适合小范围雾霾。
• 大气效果：Fog 适合模拟远景雾，如大雾天气。
• 结合后处理：配合 BokehPass、UnrealBloomPass 让雾更自然。

---

✨ 通过合理使用 Fog，可以让 Three.js 场景更有层次感，提高沉浸体验！ 🚀