three.js中 雾效果实际是按照一个像素距离摄像机的距离设置其颜色 距离摄像机越远 颜色逐渐褪色至指定颜色 超出最远距离则完全显示雾颜色
雾效果需要三个参数 颜色 最近距离 最远距离 只有与摄像机的距离在这两个值之前才会应用雾效果
在<Canvas>中添加这段代码增加雾效果
<fog attach={'fog'} args={['#f0f', 0.1, 5]}></fog>
有两点值得注意:
- 物体只会自动褪色至雾颜色 需要同时设置场景颜色或背景颜色才能无缝衔接
- 材质(Material)可以设置fog=false 使其不受雾效果影响
此外还有fogExp2可供选择 只需要设置颜色和雾强度就可以使用
<fogExp2 attach={'fog'} args={['#f0f', 0.2]}></fogExp2>
不过还是普通fog使用较多 因为可以指定作用范围
