如何通过THREE.ShaderLib ['phong']使用图像纹理

Question

我正在与演示https://github.com/mrdoob/three.js/blob/master/examples/webgl_gpgpu_water.html一起学习。

我想为此演示添加背景图片。

let material = new THREE.ShaderMaterial( {
          uniforms: THREE.UniformsUtils.merge( [
            THREE.ShaderLib[ 'phong' ].uniforms,
            {
              heightmap: { value: null },
              texture: {value: new THREE.TextureLoader().load(this.bg) }
            }
          ] ),
          vertexShader: document.getElementById( 'waterVertexShader' ).textContent,
          fragmentShader: THREE.ShaderChunk[ 'meshphong_frag' ]

        } );

但这没用。

然后我创建一个新演示。

let shaderMaterial = new THREE.ShaderMaterial({
            uniforms: {
              texture: {value: new THREE.TextureLoader().load(this.bg)}
            },
            vertexShader: document.getElementById('vertexshader').textContent,
            fragmentShader: document.getElementById('fragmentshader').textContent
        });

有效。

它如何工作？为什么？希望你能帮助我，谢谢！