Three.js雾化效果Fog和FogExp2

许高峻

2023-12-01

Three.js雾化效果`Fog`和`FogExp2`

开发Web3D应用有时候需要实现一个雾化的效果，简单说就是场景中越远的位置看起来越模糊，Three.js引擎提供了两个雾Fog和指数雾FogExp2两个类。

Three.js场景对象Scene具有一个雾化属性.fog,该属性的属性值是雾对象Fog或指数雾对象FogExp2。如果你想模拟一个雾化效果只需要在threejs代码中设置场景对象的.fog属性就可以。

通过构造函数Fog的参数1设置周围环境雾的颜色，参数2和参数3用来设置雾化影响的范围，在参数2和参数3距离范围的物体雾化效果受环境中的雾Fog影响，范围外的物体不受影响。

构造函数Fog参数一0xcc0000表示场景中雾的颜色，具体雾的颜色你可以根据具体环境设置

构造函数Fog参数二表示受雾化影响的最近距离(以相机位置为准)

构造函数Fog参数三1000表示受雾化影响的最远距离(以相机位置为准)

注意构造函数Fog参数三1000设置，太大或太小都看不出明显的逐渐递变雾化效果

var scene = new THREE.Scene();
//设置场景对象Scene的雾化属性.fog来模拟生活中雾化效果
scene.fog = new THREE.Fog(0xcc0000, 1, 1000);

Fog类定义的是线性雾，雾的密度是随着距离线性增大的，即场景中物体雾化效果随着随距离线性变化。

构造函数雾Fog(color,near,far)的三个参数分别对应雾对象Fog的三个属性.color、.near和.far。

.color属性表示雾的颜色，比如设置为红色，场景中远处物体为黑色，场景中最近处距离物体是自身颜色，最远和最近之间的物体颜色是物体本身颜色和雾颜色的混合效果。

// 改变雾的颜色为白色
scene.fog.color.set(0xffffff)

.near属性值表示应用雾化效果的最小距离，距离活动摄像机长度小于.near的物体将不会被雾所影响

.far属性值表示应用雾化效果的最大距离，距离活动摄像机长度大于.far的物体将不会被雾所影响

// 指数雾(FogExp2)
// 参数2：0.001默认值是0.00025，改变的是属性.density
scene.fog = new THREE.FogExp2(0xcc0000,0.001);

FogExp2类定义的是指数雾。也就是说，雾的密度是随着距离指数增大的。

FogExp2和Fog的雾化算法不同，都具有颜色属性.color，FogExp2没有.near和.far属性，直接设置.density属性就可以

构造函数格式FogExp2( color, density),参数1表示雾的颜色，参数2表示雾的密度将会增长多快

.density表示雾的颜色，参数2表示雾的密度将会增长多快，默认值是0.00025。