Three.js着色器素材如何獲取（地圖）紋理？

Question

我在這裏有一個問題） 我決定使用我的着色器（scene.overrideMaterial），我需要以某種方式獲得地圖紋理。

MaterialsShader = { 
uniforms: { 
    time: { type: 'f', value: 0.0 }, 
}, 
vertexShader: 
    "varying vec2 vUv; \n\ 
    void main(){\n\ 
     vUv = uv;\n\ 
     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\n\ 
     gl_Position = projectionMatrix * mvPosition;\n\ 
    }", 
fragmentShader: [ 
    'varying vec2 vUv;', 
    'uniform float opacity;', 

    '#ifdef USE_MAP', 

     'uniform sampler2D map;', 

    '#endif', 

    'void main(){', 
     'vec3 color = vec3(1.0,0.0,0.0) * opacity;', 

     '#ifdef USE_MAP', 

      'vec4 mapTexel = texture2D(map, vUv.xy);', 

      'gl_FragColor = mapTexel;', 

     '#endif', 

     //'gl_FragColor.rgb = color;', 

    '}'].join("\n") 
} 

但由於某種原因紋理本身不存在，我得到黑色材料。

var uniforms = THREE.UniformsUtils.clone(MaterialsShader.uniforms); 

    uniforms = THREE.UniformsUtils.merge([uniforms, THREE.UniformsLib['common'],THREE.UniformsLib['lights']]); 


var material = new THREE.ShaderMaterial({ 
    uniforms  : uniforms, 
    vertexShader : MaterialsShader.vertexShader, 
    fragmentShader : MaterialsShader.fragmentShader, 
}); 

我該如何獲得（地圖）紋理？

Answer 1

1）你需要真正定義map制服...

MaterialsShader = { 
uniforms: { 
    time: { type: 'f', value: 0.0 }, 
    map: { type: 't', value: yourLoadedTexture }, 
}, 

2）你需要以進入着色器的代碼段來定義USE_MAP。無論是將它添加到你的着色器代碼的頂部：

#define USE_MAP true 

或者你可以設置一個defines屬性着色器：

var material = new THREE.ShaderMaterial({ 
    uniforms  : uniforms, 
    vertexShader : MaterialsShader.vertexShader, 
    fragmentShader : MaterialsShader.fragmentShader, 
    map    : yourLoadedTexture, 
    defines   : { 
     USE_MAP: true 
    } 
}); 

這些有同樣的效果。