在 Three.js 中模拟光学倒置（镜像）相机

Question

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

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

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

但是在其中一个视口中生成镜像的最佳方法是什么？

---

我尝试过使用以下命令：-

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

但是当我应用这个命令时，对象的透视图看起来不对，请看这个 jsfiddle 示例：http://jsfiddle.net/steveow/510h3nwv/2/

---

编辑：

stdob 的回答可以完成工作，但需要使用第二个渲染器

（我的错，在原始问题中我没有明确表示希望使用单个渲染器）。

理想情况下，我只使用一个渲染器并在 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/