ThreeJS入门（004）：Fog 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 004篇入门文章

Three.js 中的 Fog（雾效）

在 Three.js 中，THREE.Fog 和 THREE.FogExp2 是用于模拟雾的效果，它们可以增加场景的真实感，尤其是在大型或开阔的空间中。雾效可以使远处的物体看起来模糊或变淡，从而营造出一种空间感。

1. THREE.Fog

THREE.Fog 代表线性雾，它是一种基于距离的雾效。随着物体离相机越来越远，它们逐渐被雾的颜色所取代。

构造函数

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

• color (0x000000)：雾的颜色，通常是一个十六进制颜色值。
• near (1)：雾开始影响物体的距离，单位为世界坐标系中的单位长度。
• far (1000)：雾完全覆盖物体的距离。

示例

const fog = new THREE.Fog(0x808080, 10, 500);
scene.fog = fog;

在这个例子中，创建了一个灰色的线性雾，当物体距离相机超过 10 个单位时开始受到影响，直到 500 个单位时完全被雾覆盖。

2. THREE.FogExp2

THREE.FogExp2 代表指数雾，它是一种基于距离的指数衰减雾效。随着物体离相机越来越远，它们逐渐被雾的颜色所取代，但这种效果是指数级的，因此远处的物体比近处的物体更快地被雾覆盖。

构造函数

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

• color (0x000000)：雾的颜色，通常是一个十六进制颜色值。
• density (0.00025)：雾的密度，决定了雾效的衰减速率。较大的值会导致雾效更快地覆盖物体。

示例

const fog = new THREE.FogExp2(0x808080, 0.00025);
scene.fog = fog;

在这个例子中，创建了一个灰色的指数雾，其密度为 0.00025，这意味着雾效会随着距离的增加而呈指数级增加。

应用场景

雾效在许多场景中都非常有用，尤其是：

• 户外场景：在模拟自然景观时，雾可以让远处的山峦或树木显得更加真实。
• 室内场景：在大型室内环境中，雾可以增加空间感，使场景看起来更加深远。
• 游戏开发：在游戏中，雾不仅可以增加视觉效果，还可以用来隐藏远处的细节，减少渲染负担。

注意事项

• 性能影响：虽然雾效可以增加场景的真实感，但也会对性能产生一定的影响。在大型场景或高性能要求的应用中，需要注意平衡视觉效果和性能。
• 兼容性：雾效在所有现代浏览器中都应该是可用的，但为了确保最佳的兼容性，最好测试一下不同设备和浏览器下的效果。

通过合理设置雾的参数，你可以为 Three.js 场景增添更多的真实感和深度。在实际应用中，可以根据场景的具体需求选择使用 THREE.Fog 或 THREE.FogExp2。