three.js - ShaderMaterial 雾参数不起作用

Question

我在 THREE.ShaderMaterial 中启用场景雾时遇到问题.目前，雾仅影响其他几何体，但使用 THREE.ShaderMaterial 创建的天穹不受雾的影响。

似乎有一个 bool 值 fog ShaderMaterial 中的参数，显然应该设置为 true 以使用场景雾。使用它会导致 uniforms.fogColor is undefined然而错误。错误发生在 WebGLRenderer功能 refreshUniformsFog .

这是一个错误还是我使用的参数错误？

测试用例基于 webgl_materials_lightmap.html 示例:http://jsfiddle.net/HXhb4/
如果您在第 62 行将雾设置为 true 并运行测试，则会出现错误。我想要发生的是天穹会受到雾的影响，就像使用普通 MeshPhongMaterial 创建的模型或天穹一样。

Answer 1

如果你想在自定义中使用雾 ShaderMaterial ，您需要确保指定所需的雾uniforms .例如，

var uniforms = {
    topColor:    { type: "c", value: new THREE.Color( 0x0077ff ) },
    bottomColor: { type: "c", value: new THREE.Color( 0xffffff ) },
    offset:      { type: "f", value: 33 },
    exponent:    { type: "f", value: 0.6 },
    fogColor:    { type: "c", value: scene.fog.color },
    fogNear:     { type: "f", value: scene.fog.near },
    fogFar:      { type: "f", value: scene.fog.far }
}

var skyMat = new THREE.ShaderMaterial( {
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: uniforms,
    side: THREE.BackSide,
    fog: true
} );

同时指定 fogDensity如果你决定使用它。您还必须将雾逻辑合并到您的着色器中。

三.js r.59