javascript - 在 Three.js 中模拟光学倒转(镜像)相机

Question

我有一个 Three.js 场景，其中包含各种对象和一些文本。它由单个摄像头camera_A查看，其输出发送到我的浏览器网页的一部分中的viewport_A。

现在我想要第二个摄像头 (camera_B) 来查看同一场景并将其输出传递到同一网页另一部分的第二个视口(viewport) (viewport_B)。 Camera_B 在各个方面都与 Camera_A 相同，只是它生成的图像(在第二个视口(viewport)_B 中)应该是(视口(viewport)_A)中图像的镜像。

我知道如何在同一页面上设置不同的视口(viewport)，并创建两个相同的相机，并将它们的输出发送到单个渲染器对象中的两个视口(viewport)(具有两个渲染操作)。

但是在视口(viewport)之一中生成镜像的最佳方法是什么？

<小时/>

我尝试使用以下命令:-

camera.projectionMatrix.scale
     (new THREE.Vector3(-1, 1, 1));

但是当我应用此命令时，生成的对象透视图看起来错误，请参阅此 jsfiddle 示例:http://jsfiddle.net/steveow/510h3nwv/2/

<小时/>

编辑:

stob 的答案可以完成这项工作，但需要使用第二个渲染器

(我的错，我没有在原始问题中明确表达对单个渲染器的愿望)。

理想情况下，我只使用一个渲染器并在 viewport_B 中镜像图像。

Answer 1

您可以使用后处理和自定义着色器:

THREE.MirrorShader = {

    uniforms: {
        "tDiffuse": { type: "t", value: null }
    },

    vertexShader: [
        "varying vec2 vUv;",
        "void main() {",
            "vUv = uv;",
            "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join("\n"),

    fragmentShader: [
        "uniform sampler2D tDiffuse;",
        "varying vec2 vUv;",
        "void main() {",
            "vec2 mvUv = vec2(1.-vUv.x, 1.-vUv.y);", // Mirror
            "vec4 color = texture2D( tDiffuse, mvUv );",
            "gl_FragColor = color;",
        "}"
    ].join("\n")
};

http://jsfiddle.net/4jmaphjw/