Три. js - как создать зеркальное отображение для всей сцены - PullRequest
Новая
       69

Три. js - как создать зеркальное отображение для всей сцены

1 голос
/ 12 апреля 2020

поэтому я создаю AR-гарнитуру, которая использует стерео рендеринг для создания 3D-изображений Единственная проблема заключается в том, что когда изображение отражается от отражателей гарнитуры, оно создает зеркальное отражение. Мне нужно учитывать это в моем коде 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);

Я также приложил несколько изображений, чтобы объяснить, что моя цель: This is currently what is being rendered with the code above

enter image description here

Может быть легко просто перевернуть куб, используя матрицу, но что если десятки больше 3D объектов добавляются на сцену? В идеале мне бы хотелось, чтобы всю камеру можно было перевернуть для имитации зеркального изображения всей сцены относительно стереокамеры (если это возможно).

Буду признателен за любую помощь. Стоит также отметить, что я попытался вручную перевернуть экран в настройках дисплея Window, но это не дало желаемого результата.

1 Ответ

1 голос
/ 12 апреля 2020

Не могли бы вы просто использовать CSS, чтобы перевернуть элемент, который вы используете для рендеринга сцены? 

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