Three.js-如何为整个场景创建镜像

Question

所以我正在构建使用立体声渲染来创建3d图像的AR耳机。唯一的问题是，当图像从头戴式耳机的反射器反射时，会产生翻转的（镜）图像。我需要在Three.js代码中考虑到这一点，所以我想知道是否有2个选项：

1. 翻转场景中的每个3d对象
2. 或翻转照相机以模拟光学倒置（镜象）照相机

我将在此处发布代码的基础知识：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

const stereo = new THREE.StereoCamera();

function render() {

   //stereo rendering code 
   camera.updateWorldMatrix();
   stereo.update(camera);

   const size = new THREE.Vector2();
   renderer.getSize(size);
   renderer.setScissorTest(true);
   renderer.setScissor(0, 0, size.width / 2, size.height);
   renderer.setViewport(0, 0, size.width / 2, size.height);
   renderer.render(scene, stereo.cameraL);

   renderer.setScissor(size.width / 2, 0, size.width / 2, size.height);
   renderer.setViewport(size.width / 2, 0, size.width / 2, size.height);
   renderer.render(scene, stereo.cameraR);

   renderer.setScissorTest(false);
 }

  requestAnimationFrame(render);

我还附上了一些图片以说明我的目标是：

使用矩阵翻转立方体可能很容易，但是如果将更多的3d对象添加到场景中怎么办？理想情况下，如果整个摄像头可以翻转以模拟整个场景相对于立体摄像头的镜像图像（如果可能），我会很喜欢。

我将不胜感激。还值得注意的是，我尝试通过Window的显示设置手动翻转显示，但是没有得到我想要的结果。

Answer 1

您可以仅使用CSS来翻转用于渲染场景的元素吗？

<style>
  canvas {
    transform: scaleX(-1);
  }
</style>