webGL使用threejs实现白雾效果
通过Fog实现雾
// 设置雾化效果，雾的颜色和背景颜色相近，这样远处网格线和背景颜色融为一体
scene.fog = new THREE.Fog(0xffffff, -100, 1000);
背景
通过和雾类似的背景来和雾搭配使用。
// 设置three.js背景颜色 和雾化颜色相配
renderer.setClearColor(0xffffff, 1);
动态效果
演示实例
雾化方法THREE.Fog说明介绍：
THREE.Fog 是 Three.js 中用于实现线性雾化效果的类。它有以下构造函数和属性：
构造函数：
THREE.Fog(color, near, far);
参数：
color：表示雾化的颜色，可以是十六进制数值（例如：0x000000）或 Three.js 的颜色表示（例如：new THREE.Color(0x000000)）。near：表示近处的雾化距离，物体离相机越近，受雾化影响越弱。通常是一个正数，表示距离相机的最近距离，单位为世界坐标。far：表示远处的雾化距离，物体离相机越远，受雾化影响越强。通常是一个正数，表示距离相机的最远距离，单位为世界坐标。
用法：
- 创建
THREE.Fog对象：
const fogColor = 0x000000; // 雾化颜色，黑色
const fogNear = 1; // 近处的雾化距离
const fogFar = 10; // 远处的雾化距离
const fog = new THREE.Fog(fogColor, fogNear, fogFar);
- 将
THREE.Fog对象应用到场景：
scene.fog = fog;
这样，场景中的所有物体都将受到这个雾化效果的影响。离相机越近的物体会显示得更清晰，离相机越远的物体会受到雾化效果的影响，看起来更加朦胧。
注意：THREE.Fog 只对于使用 MeshBasicMaterial、MeshLambertMaterial 或 MeshPhongMaterial 等材质的物体起作用。对于使用 ShaderMaterial 或 MeshStandardMaterial 等自定义材质的物体，你可能需要手动在着色器中实现雾化效果。
视频教程
threejs实现雾化的相关视频教程
实例代码
项目环境基于vue3 vite js node.js 14
