Javascript 在Three.js中模拟光学反转（镜像）摄影机

我有一个包含各种对象和一些文本的Three.js场景。它是由一个摄像头查看的，摄像头a的输出将进入我的浏览器网页的一部分中的视口a

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

我知道如何在同一页面上设置不同的视口，创建两个相同的摄影机，并将其输出发送到单个渲染器对象中的两个视口（使用两个渲染操作）

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

---

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

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

但是当我应用这个命令时，得到的对象透视图看起来是错误的，请参见下面的JSFIDLE示例：

---

编辑：

stdob的答案可以完成任务，但需要使用第二个渲染器

（糟糕的是，我没有在原问题中明确表示希望有一个渲染器）

---

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

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

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")
};

---

1。这种方法的缺点是，如果在渲染器构造函数中指定了抗锯齿：

renderer=new THREE.WebGLRenderer（{antialas:true}），则会丢失抗锯齿2。你确定还要翻转vUv.y吗？谢谢，但当我翻转对象时，对象会从左下角转到右上角（请参见JSFIDLE的这个分支：to flip，在渲染函数中取消注释行“//do_flip=true；”），即旋转？……而我想要的是单镜像操作，例如，对象将从左下角到右下角。@steveOw请参见上面的注释（2.）。@WestLangley谢谢，我将fragmentShader中的行更改为>，效果良好，但请参见我的下一条注释。@stdob根据WestLangley的提示，我根据上面的注释进行了更改，效果良好。谢谢但是，理想情况下，我希望在单个渲染器上使用两个视口。对不起，我忘了在我原来的问题中说过这句话。