Three.js中实现雾效的方法

在Three.js中，可以使用Fog或FogExp2类来实现场景中的雾效。Fog类创建的是线性雾效，而FogExp2类创建的是指数雾效。两者都会根据物体与相机的距离来增加雾的密度，从而实现不同的视觉效果。

1. Fog（线性雾）

Fog类创建的是线性雾效，其中雾的密度随距离线性增长。Fog类的构造函数接受三个参数：

• color：雾的颜色，通常是一个十六进制颜色值。
• near：开始应用雾的最小距离，即物体距离相机小于这个值时，不会受到雾的影响。
• far：应用雾的最大距离，即物体距离相机大于这个值时，不会收到雾的影响。

2. FogExp2（指数雾）

FogExp2类创建的是指数雾效，其中雾的密度随着距离的增加以指数方式增长。FogExp2类的构造函数接受两个参数：

• color：雾的颜色，同样是一个十六进制颜色值。
• density：雾的密度，决定了雾效的衰减速率。较高的密度值会导致雾效更快地覆盖物体。

// 创建一个平面物体
let plane = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshBasicMaterial({ color: 0x666666 })
);
plane.rotation.x = -Math.PI / 2;

// 创建一个立方体物体
let cube = new THREE.Mesh(
  new THREE.BoxGeometry(2, 2, 2),
  new THREE.MeshBasicMaterial({
    color: 0xff0000,
  })
);
cube.position.set(0, 2, 0);

// 设置背景与雾颜色一致，效果更逼真
scene.background = new THREE.Color("0xcccccc");
// 1.创建场景线性雾
// scene.fog=new THREE.Fog(0xcccccc, 0.1, 25);
// 2.创建场景指数雾
scene.fog=new THREE.FogExp2(0xcccccc, 0.1);