Javascript THREE.js向着色器材质添加雾

我对JS相当陌生，尤其是Three.JS中的着色器。现在，我只是尝试在这里的鸟类示例中使用的着色器材质上启用雾。我正在构建一个基于水下的应用程序，因此将以类似的方式渲染鱼，但在尝试了这里的所有示例/问题和许多其他搜索之后，我似乎无法让它工作

加载一个外部着色器文件（我将最近回答的一个问题与Birds示例中的实际着色器代码合并在一起，希望它能工作）似乎是一种流行的方法，但现在我遇到了加载和访问着色器的问题。这是我的CustomFogShader类：

THREE.CustomFogShader = {

    uniforms: THREE.UniformsUtils.merge( [

        THREE.UniformsLib[ "fog" ],

        {

        "someCustomUniform" : { type: 'f', value: 1.0 }

        }

    ] ),

    fragmentShader: [

        "varying float someCustomVarying;",

        THREE.ShaderChunk[ "common" ],
        THREE.ShaderChunk[ "fog_pars_fragment" ],

        "void main() {",

            "vec3 outgoingLight = vec3( 0.0 );",

            THREE.ShaderChunk[ "fog_fragment" ],

            "gl_FragColor = vec4(outgoingLight, 1.0);",

        "}"

    ].join("\n"),

    vertexShader: [

        "uniform float someCustomUniform;",

        "varying float someCustomVarying;",

        "attribute vec2 reference;",
        "attribute float birdVertex;",

        "attribute vec3 birdColor;",

        "uniform sampler2D texturePosition;",
        "uniform sampler2D textureVelocity;",

        "varying vec4 vColor;",
        "varying float z;",

        "uniform float time;",

        "void main() {",

            "someCustomVarying = 1.0 * someCustomUniform;",

            "vec4 tmpPos = texture2D( texturePosition, reference );",
            "vec3 pos = tmpPos.xyz;",
            "vec3 velocity = normalize(texture2D( textureVelocity, reference ).xyz);",

            "vec3 newPosition = position;",

            "if ( birdVertex == 4.0 || birdVertex == 7.0 ) {",
                // flap wings
                "newPosition.y = sin( tmpPos.w ) * 5.;",
            "}",

            "newPosition = mat3( modelMatrix ) * newPosition;",


            "velocity.z *= -1.;",
            "float xz = length( velocity.xz );",
            "float xyz = 1.;",
            "float x = sqrt( 1. - velocity.y * velocity.y );",

            "float cosry = velocity.x / xz;",
            "float sinry = velocity.z / xz;",

            "float cosrz = x / xyz;",
            "float sinrz = velocity.y / xyz;",

            "mat3 maty =  mat3(",
                "cosry, 0, -sinry,",
                "0    , 1, 0     ,",
                "sinry, 0, cosry",

            ");",

            "mat3 matz =  mat3(",
                "cosrz , sinrz, 0,",
                "-sinrz, cosrz, 0,",
                "0     , 0    , 1",
            ");",

            "newPosition =  maty * matz * newPosition;",
            "newPosition += pos;",

            "z = newPosition.z;",

            "vColor = vec4( birdColor, 1.0 );",

            "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );",

        "}"

    ].join("\n")

    };

当尝试访问ShaderTreal构造函数中的着色器时，我在CustomShader上遇到未定义的错误

var material = new THREE.ShaderMaterial( {
                uniforms:       birdUniforms,
                vertexShader:   THREE.CustomFogShader.vertexShader,
                fragmentShader: THREE.CustomFogShader.fragmentShader,
                side: THREE.DoubleSide,
                fog: true

            });

我已经阅读了我需要使用ShaderLoader类。。但我能找到的唯一例子是单独加载每个着色器，所以我想我的问题是：如何加载此文件并访问ShaderMaterial设置中的着色器？或者，是否有人知道更好的方法来获取scene.fog以影响示例中的Birds ShaderMaterial

经过多次尝试和失败，我不知所措：（

---

提前感谢您的建议！

这是我最近回答的一个关于着色器中的雾的问题。您在哪里读到了有关着色器加载程序的内容？您没有将CustomFogShader用作类，您只是使用它来存储变量，因为您仍在调用

new THREE.ShaderMaterial

。未定义的错误到底说明了什么？这是一个问题我最近回答了有关着色器中的雾的问题。您在哪里读到了有关着色器加载程序的内容？您没有将CustomFogShader用作类，您只是使用它来存储变量，因为您仍然在调用

new THREE.ShaderMaterial

。未定义的错误到底说明了什么？