HTML5建模怎么添加雾效_场景雾化效果制作方法【教程】

优先选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）不影响雾计算，但开启后边缘过渡更柔和

雾效真正生效的前提，是理解你用的是哪种 Fog 类型、它的参数如何映射到你的场景单位和相机设置——而不是复制粘贴示例代码。很多“没效果”的问题，根源都在 camera.far 和 Fog 范围的数值错位。