使用ArrayCamera会导致1个单位以外的对象消失

Question

使用PerspectiveCamera时，对象会正确渲染。但是，当我将PerspectiveCamera包裹在ArrayCamera中并使用ArrayCamer时，0,0,0的1个单位之外的对象似乎会消失。

var camera = new THREE.PerspectiveCamera();
camera.viewport = new THREE.Vector4(0, 0, canvas.width, canvas.height);
camera.position.set(0, 10, 40)
arrayCamera.cameras.push(camera);
scene.add(camera);

这是透视相机渲染的视频

使用ArrayCamera包装PerspectiveCamera

Answer 1

使用ArrayCamera时，必须注意以特殊方式处理视图截头体剔除。

通常，如果对象在摄影机的视锥体之外，则视锥体剔除用于丢弃渲染中的对象。截头体源自摄影机的投影和视图矩阵。在代码中使用类似ArrayCamera的矩阵时，两个矩阵都没有正确设置，因此不正确的视图截头体剔除会破坏场景。有很多方法可以解决这个问题：

• 请参见Object3D.frustumCulled到false，禁用对象的视锥体剔除
• 为ArrayCamera实例定义一个三维变换和投影矩阵。我已经在以下实际示例中实现了这一点：

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);
//cube.frustumCulled = false; // FIX 
scene.add(cube);
camera.position.z = 10;
camera.updateMatrixWorld();
camera.viewport = new THREE.Vector4(0, 0, window.innerWidth, window.innerHeight);
var arraycamera = new THREE.ArrayCamera();
arraycamera.cameras.push(camera);
arraycamera.position.copy( camera.position ); // FIX 
arraycamera.projectionMatrix.copy( camera.projectionMatrix ); // FIX 
var animate = function() {
requestAnimationFrame(animate);
if (cube.position.x > 5)
cube.position.x = -1;
else cube.position.x += 0.1;
renderer.render(scene, arraycamera);
};
animate();

body {
margin: 0;
}
canvas {
display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.js"></script>

正如你所看到的，我刚刚从你的实际相机中复制了这些值。在VR(主要使用ArrayCamera(的上下文中，您希望组合投影矩阵来生成覆盖左眼和右眼的截头体。

一般的想法是在使用ArrayCamera时只执行一次视图截头体剔除(因为您使用单个渲染过程执行多个渲染(。