Three.js

Question

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

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

我会 post 我的代码的基础知识在这里：

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>

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

Three.js - how to create mirror image for the entire scene

javascript

matrix

orientation

stereo-3d