Three.js:渲染器无法与 ArrayCamera 一起使用

Question

我在 html 中有以下内容:

<script type="module">
  import * as THREE from "https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbbfa3b9aeae8bfbe5faf9fae5fa" rel="noreferrer noopener nofollow">[email protected]</a>/build/three.module.js";
  import { OrbitControls } from "https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5a465c4b4b6e1e001f1c1f001f" rel="noreferrer noopener nofollow">[email protected]</a>/examples/jsm/controls/OrbitControls.js";

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

  const scene = new THREE.Scene();
  const cameraR = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  const cameraL = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  
  const axesHelper = new THREE.AxesHelper( 5 );
  scene.add( axesHelper );

  const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
  const material = new THREE.MeshNormalMaterial();
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  cameraR.position.x = 0.5;
  cameraR.position.z = 5;
  cameraL.position.x = -0.5;
  cameraL.position.z = 5;
  
  var cameras = [];
  cameras.push(cameraL)
  cameras.push(cameraR)     
  var cameraVR = new THREE.ArrayCamera( cameras );
  cameraVR.position.set( 0, 0, 5 );

  const controls = new OrbitControls(cameraVR, 
        renderer.domElement);
  controls.update();

  (function animate() {
    requestAnimationFrame(animate);
    
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    controls.update();
    renderer.render(scene, cameraVR);
  })();

它给了我错误:

这段代码中我缺少什么？

编辑:编辑了之前的代码，因为分配给控件的相机之前是错误的。但问题仍然存在。

Answer 1

您的代码失败，因为您缺少为每个子摄像头添加视口(viewport)定义。 documentation状态:

An instance of ArrayCamera always has an array of sub cameras. It's mandatory to define for each sub camera the viewport property which determines the part of the viewport that is rendered with this camera.

我已相应更新了您的代码:

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

const scene = new THREE.Scene();
const cameraR = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
cameraR.viewport = new THREE.Vector4( window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight );
const cameraL = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
cameraL.viewport = new THREE.Vector4( 0, 0, window.innerWidth / 2, window.innerHeight );

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

cameraR.position.x = 0.5;
cameraR.position.z = 5;
cameraR.lookAt( 0, 0, 0 );
cameraL.position.x = -0.5;
cameraL.position.z = 5;
cameraL.lookAt( 0, 0, 0 );

var cameras = [];
cameras.push(cameraL)
cameras.push(cameraR)
var cameraVR = new THREE.ArrayCamera(cameras);
cameraVR.position.set(0, 0, 5);


(function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, cameraVR);
})();

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71051903141431415f404340" rel="noreferrer noopener nofollow">[email protected]</a>/build/three.js"></script>

官方阵列相机演示webgl_camera_array还演示了该类的用法。