Three.js开发之Fog组件知识整理

1. Fog 组件简介

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

Three.js 提供了 两种雾效：

• THREE.Fog - 线性雾，随距离均匀加深。
• 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）：

• 使用 UnrealBloomPass 增强雾中的光照：

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

• 使用 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. 总结

最佳实践

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

到此这篇关于Three.js开发之Fog组件知识整理的文章就介绍到这了,更多相关Three.js Fog组件知识内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论