three.js—ArrayCamera使用

ArrayCamera

new THREE.ArrayCamera(Array)
创建一组相机，其参数是一个数组，数组中的每一个值都是一个THREE.Camera。可用此方法使用多个相机在不同位置拍摄场景，并分屏放置画面。效果如图，这是创建了三个相机然后在x,y,z三个方向上以相同的距离拍摄的场景中的对象。

实现过程

1. 创建场景，渲染器和拍摄物体对象，可参照three.js学习

2. 创建多个相机,这里我只用三个所以就直接这样创建了，如果想用很多相机，可以使用for循环生成相机。
   注意：相机的第二个参数长宽比一定要和该相机的视窗长宽比相同，否则会造成拍摄画面的变形。我用的相机视窗大小为innerWidth/2×innerHeight/2,和相机的拍摄长宽比相同。

   //相机1
   var camera1 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100 );
   //设置视窗位置及大小
   camera1.viewport=new THREE.Vector4(0,height/2,width/2,height/2 );
   //设置相机位置为x轴5个单位长度
   camera1.position.x=-5
   //相机指向物体
   camera1.lookAt(0,0,0)
   camera1.updateMatrixWorld();
   //相机2
   var camera2 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100 );
   camera2.viewport=new THREE.Vector4(width/2,height/2,width/2,height/2 );
   camera2.position.y=5
   camera2.lookAt(0,0,0)
   camera2.updateMatrixWorld();
   //相机3
   var camera3 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100 );
   camera3.viewport=new THREE.Vector4(0,0,width/2,height/2 );
   camera3.position.z=5
   camera3.updateMatrixWorld();
   

   camera.viewport用来设置该相机的视窗大小，相机的默认视窗就是整个渲染器，使用多个相机就要将渲染器划分多个区域用于显示不同相机的拍摄画面。通过new THREE.Vector4定义一块区域，这个没怎么弄明白，不过大致用法是前两个参数确定区域左下角的点坐标（y轴原点在最底部），后两个参数分别为区域的长和宽。

   然后设置相机的位置，通过camera.position来设置。
   相机的初始位置为（0,0，0）点，所以必须移动相机或物体才能拍摄到。
   相机的初始为屏幕由外向内，所以移动相机后必须使其镜头转动朝向物体才能渲染出物体，向z轴正向移动除外。故使用camera.lookAt(0,0,0)将镜头转向位于原点的物体。

   最后，使用camera.updateMatrixWorld();更新相机的矩阵。将这三个相机添加进数组赋给ArrayCamera：var cameras=new THREE.ArrayCamera([camera1,camera2,camera3]),最后的渲染改成renderer.render(scene, cameras);

   代码

   import * as THREE from 'three'
   var width=innerWidth
   var height=innerHeight
   var scene = new THREE.Scene();
   
   var camera1 = new THREE.PerspectiveCamera(75,window.innerWidth /window.innerHeight, 0.1, 100 );
   camera1.viewport=new THREE.Vector4(0,height/2,width/2,height/2 );
   camera1.position.x=-5
   camera1.lookAt(0,0,0)
   camera1.updateMatrixWorld();
   var camera2 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100 );
   camera2.viewport=new THREE.Vector4(width/2,height/2,width/2,height/2 );
   camera2.position.y=5
   camera2.lookAt(0,0,0)
   camera2.updateMatrixWorld();
   var camera3 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100 );
   camera3.viewport=new THREE.Vector4(0,0,width/2,height/2 );
   camera3.position.z=5
   //camera3.lookAt(0,0,0)
   camera3.updateMatrixWorld();
   var cameras=new THREE.ArrayCamera([camera1,camera2,camera3])
   
   var renderer = new THREE.WebGLRenderer();
   renderer.setSize( window.innerWidth, window.innerHeight );
   document.body.appendChild( renderer.domElement );
   
   var geometry=new THREE.BoxGeometry(1,2,3)
   var material=new THREE.MeshBasicMaterial({color:0x00ff00})
   var mesh=new THREE.Mesh(geometry,material)
   scene.add(mesh)
   
   
   function render(){
   renderer.render(scene, cameras);
   mesh.rotation.x+=0.01
   mesh.rotation.y+=0.01
   mesh.rotation.z+=0.01
   requestAnimationFrame(render);
   }
   render()