Threejs系列：雾

Thresj支持雾气的效果，本文简单介绍下

1. 首先创建一个物体，巨长的长方体

const geometry = new THREE.BoxGeometry( 1, 1,100 ); 
const texttureLoader = new THREE.TextureLoader()
  const material = new THREE.MeshBasicMaterial( {
  color: 'green'
} ); 
const cube = new THREE.Mesh( geometry, material ); 
scene.add( cube );

2. 添加线性雾

   // 雾
   scene.fog = new THREE.Fog(0x999999, 0, 50)
   scene.background = new THREE.Color(0x999999);

3. 添加指数雾

   scene.fog = new THREE.FogExp2(0x999999, 0.1)

线性顾名思义，就是线性递减。从图片对比中明显看出，指数雾比线性雾气浓烈些许。