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

【问题标题】：Three.js - how to create mirror image for the entire sceneThree.js - 如何为整个场景创建镜像
【发布时间】：2020-07-24 18:12:59
【问题描述】：

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

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

我将在这里发布我的代码的基础知识：

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 的显示设置手动翻转显示，但这并没有达到我想要的结果。

【问题讨论】：

标签： javascript matrix three.js orientation stereo-3d

【解决方案1】：

你能用 CSS 来翻转你用来渲染场景的元素吗？

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

【讨论】：