threejs，画雾 - 技术栈

在Three.js中，雾(Fog)效果是增强3D场景视觉深度和氛围的重要工具。

线性雾(Fog)
指数平方雾(FogExp2)

雾效果的基本概念

雾效果在Three.js中通过Fog和FogExp2两个类实现，它们模拟了真实世界中物体随着距离增加逐渐模糊消失的现象。这种效果不仅能够增强场景的深度感，还能创造出特定的环境氛围，如雾天、水下或朦胧的视觉效果。

雾的工作原理：通过修改物体颜色实现的------随着物体距离相机越远，其颜色会逐渐与雾的颜色混合。当距离足够远时，物体颜色将完全被雾色取代。

线性雾(Fog)的使用

线性雾是最基础的雾效果，其浓度随距离线性增加。

创建线性雾的代码如下：

js 复制代码

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xcccccc, 10, 15);

Fog构造函数接受三个参数：

color：雾的颜色，(可以写：十六进制数值、CSS样式字符串）
near：雾效果开始的距离，此距离内物体不受雾影响
far：雾效果完全覆盖物体的距离，超过此距离物体将完全被雾色覆盖

在实际应用中，线性雾适合需要明确控制雾开始和结束位置的场景。例如，在游戏中创建逐渐消失的远景效果。

指数平方雾(FogExp2)的使用

指数平方雾提供了更自然的雾效果，其浓度随距离呈指数级增长：

javascript 复制代码

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xcccccc, 0.002);

FogExp2构造函数接受两个参数：

color：雾的颜色
density：雾的密度，控制雾浓度增加的速度

指数雾特别适合：模拟真实世界中的大气散射效果，如浓雾或水下环境。它没有明确的开始和结束距离，而是随着距离连续变化，通常能产生更自然的效果。

示例

场景设置，包含两种雾效果的切换：

javascript 复制代码

// 创建场景和基本设置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

// 设置线性雾
scene.fog = new THREE.Fog(0x999999, 0.1, 50);

// 或者设置指数雾
// scene.fog = new THREE.FogExp2(0x999999, 0.1);

// 设置背景色与雾色一致
scene.background = new THREE.Color(0x999999);

// 添加测试几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 100);
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);

注意📢：雾参数需要根据场景尺寸精心调整：

线性雾的near和far应与相机可见范围匹配

指数雾的density值通常很小(0.001-0.01范围)
再来，循环去做雾🌫的动画。

动态雾效果：通过动画改变雾参数可模拟天气变化：

javascript 复制代码

function animate() {
  scene.fog.density = Math.sin(Date.now() * 0.001) * 0.01 + 0.01;
}

*然后

区域雾 ：通过组合多个相机或渲染通道，可在场景不同区域应用不同雾设置。后处理增强：结合Three.js后处理通道，可进一步增强雾效果的真实感。

总结

Three.js的雾效果是增强3D场景视觉深度和氛围的强大工具。

线性雾(Fog) 适合需要精确控制雾范围的情况，

指数平方雾(FogExp2) 则提供了更自然的浓度变化。

无论是游戏开发、建筑可视化还是艺术创作，恰当地使用雾效果都能显著提升场景的真实感和沉浸感。