优先选THREE.FogExp2用于开阔户外场景，THREE.Fog用于室内可控深度场景；两者互斥，需匹配camera.far与雾参数，且材质启用material.fog。
Three.js 里 THREE.Fog 和 THREE.FogExp2 怎么选
HTML5 本身不提供雾效，所谓“HTML5建模”实际多指用 Three.js 等 WebGL 库在 Canvas 中渲染 3D 场景。雾效必须由渲染引擎控制，Three.js 提供两种主流实现：THREE.Fog（线性雾）和 THREE.FogExp2（指数雾）。选错会导致雾不生效、远处物体突兀消失或整体发灰。
-
THREE.Fog按距离线性插值，需指定近距near和远距far，适合室内或可控深度场景，比如建筑漫游 -
THREE.FogExp2基于相机深度指数衰减，只需一个密度参数density（如0.01），更接近真实大气，适合开阔户外场景 - 两者不能共存——设置一个会覆盖另一个；若同时设置，后者优先级更高
- 启用前必须确保场景有
scene.fog = new THREE.Fog(...)，且材质未禁用雾计算（默认开启，但material.fog = false会绕过）
为什么加了 THREE.Fog 却没看到雾
最常见原因是雾的 near/far 范围与相机视锥不匹配，或对象未被雾影响。雾只作用于启用了 material.fog = true 的材质（默认为 true），但部分自定义 ShaderMaterial 或 RawShaderMaterial 默认关闭。
- 检查相机
camera.near和camera.far：若camera.far = 1000，但new THREE.Fog(0x000000, 10, 50)，则只有距离 10–50 范围内有雾，其余区域无变化 - 确认物体材质不是
MeshBasicMaterial：该材质不参与光照与雾计算，换用MeshStandardMaterial或显式设material.fog = true - 确保渲染器开启了
renderer.shadowMap.enabled = true不影响雾，但若用了renderer.setClearColor()设了深色背景，可能掩盖雾的渐变效果——建议用浅灰如0xeeeeee对比测试
THREE.FogExp2 密度调多少才自然
没有固定值，取决于场景单位尺度和相机远裁剪面。密度太小（如 0.001）几乎不可见；太大（如 0.1）会让近处物体也迅速褪色。关键看 camera.far 值——它决定了雾的“有效作用深度”。
- 若
camera.far = 1000，起始尝试new THREE.FogExp2(0.002)；若雾太弱，逐步增至0.005～0.01 - 若场景单位是“米”，而模型按“厘米”导入（导致数值过大），
camera.far可能设成 100000，此时密度需压到0.0001级别才合理 - 动态调整技巧：把密度绑到 GUI 控件（如 dat.GUI），实时拖动观察，比硬编码更可靠
const fog = new THREE.FogExp2(0xaaaaaa, 0.005); scene.fog = fog; // 注意：FogExp2 颜色仅影响远处趋近色，不控制渐变起始色（那是材质 baseColor + 雾混合的结果）
WebGL 渲染管线中雾效在哪一环生效
雾是在片元着色器（fragment shader）阶段混合的，不是后期处理。这意味着：它依赖每个片元的深度值（gl_FragCoord.z），与材质的 color 输出直接混合，不经过后处理通道（如 EffectComposer）。因此，如果你用了 RenderPass + ShaderPass 流程，雾必须在最终合成前完成，否则会被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 所有标准材质（
MeshStandardMaterial等）内置雾逻辑，无需改 Shader - 自定义
ShaderMaterial必须手动加入雾代码片段，例如在fragmentShader末尾添加#include并确保定义了USE_FOG - 使用
EffectComposer时，雾应作用于第一个RenderPass的结果；若在后续ShaderPass中再加雾，已丢失原始深度信息，效果错误 - 抗锯齿（
antialias: true）不影响雾计算，但开启后边缘过渡更柔和
camera.far 和 Fog 范围的数值错位。 
