自定义 phong 着色器 envMap 翻转

Question

我使用的 ShaderMaterial 是默认 Phong 着色器的完整副本（我使用 shaderChunks）。

我的问题是 envMap 被翻转了 X...

这是我得到的：

而我想要的是：

我试图访问 cubeCamera.renderTarget.texture 以使用 repeat.x = -1 和 wrapS = THREERepeatWrapping.RepeatWrapping 但它什么也没做...

var cubeCamera = new THREE.CubeCamera(0.01, 500, 256);
scene.add(cubeCamera);

var sphereMaterial = new THREE.ShaderMaterial({
    uniforms: THREE.UniformsUtils.merge([
        THREE.UniformsLib.common,
        THREE.UniformsLib.aomap,
        THREE.UniformsLib.lightmap,
        THREE.UniformsLib.emissivemap,
        THREE.UniformsLib.bumpmap,
        THREE.UniformsLib.normalmap,
        THREE.UniformsLib.displacementmap,
        THREE.UniformsLib.fog,
        THREE.UniformsLib.lights,
        THREE.UniformsLib.shadowmap,
        {
            emissive: {
                type: "c",
                value: new THREE.Color(0x000000)
            },
            specular: {
                type: "c",
                value: new THREE.Color(0x111111)
            },
            shininess: {
                type: "f",
                value: 30
            },
            envMap: {
                type: "t",
                value: cubeCamera.renderTarget
            }
        }
    ]),
    vertexShader: require("../../shaders/phong.vert.glsl"),
    fragmentShader: require("../../shaders/phong.frag.glsl"),
    blending: THREE.AdditiveBlending,
    depthWrite: false,
    transparent: true,
    opacity: 1,
    lights: true
});

sphereMaterial.envMap = true;

编辑：

JSFIDDLE example

Answer 1

要获得您想要的反射，请设置

sphereShaderMaterial.uniforms.flipEnvMap.value = 1;

我不确定这实际上是什么时候在 MeshPhongMaterial 上设置的，我怀疑它在 WebGLRenderer 的某处进行了一些检查并设置了它。 WebGLRenderer 对不同类型的材质做了很多事情，这使得它们很难简单地扩展。

自定义 phong 着色器 envMap 翻转

custom phong shader envMap flipped

shader

glsl

three.js