更新于 

Camera

camera array 相机阵列

ArrayCamera

多机位案例
ArrayCamera文档

支持添加多个subCamera子相机，通过设置子相机的viewport来摆设机位：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 机位数量
const AMOUNT = 6
const ASPEC_RATIO = window.innerWidth / window.innerHeight
const WIDTH = (window.innerWidth / AMOUNT) * window.devicePixelRatio
const HEIGHT = (window.innerHeight / AMOUNT) * window.devicePixelRatio
for(let y = 0; y<AMOUNT; y++){
  for(let x = 0; x < AMOUNT; x++){
      // 创建子相机
      const subcamera = new THREE.PerspectiveCamera(
          40,
          ASPEC_RATIO,
          0.1,
          10
      )
      // 设置视口的坐标和宽高
      subcamera.viewport = new THREE.Vector4(
          Math.floor(x * WIDTH),
          Math.floor(y * HEIGHT),
          Math.ceil(WIDTH),
          Math.ceil(HEIGHT)
      )
      // 设置机位
      subcamera.position.set(
          x/AMOUNT - 0.5,
          0.5 - y/AMOUNT,
          1.5
      )
      // 调整焦距
      subcamera.position.multiplyScalar(2)
      subcamera.lookAt(0, 0, 0)
      subcamera.updateMatrixWorld()
      cameras.push(subcamera)
  }
}
// 创建相机阵列
camera = new THREE.ArrayCamera(cameras)
camera.position.z = 3
关键点

对相机viewport的布局，需要在window.resize中进行重新排版，
通过camera.cameras获取到所有子相机的列表，
更新相机的比例和尺寸时，不仅仅要更新子相机的，
还要更新ArrayCamera类型的父相机：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
camera.aspect = ASPEC_RATIO
camera.updateProjectionMatrix()
for(let y = 0; y < AMOUNT; y++){
  for(let x = 0;x<AMOUNT;x++){
    const subcamera = camera.cameras[AMOUNT * y + x];

    subcamera.viewport.set(
        Math.floor( x * WIDTH ),
        Math.floor( y * HEIGHT ),
        Math.ceil( WIDTH ),
        Math.ceil( HEIGHT )
    );
    subcamera.aspect = ASPEC_RATIO
    subcamera.updateProjectionMatrix()

  }
}

使用到和比例相关的数据，都用到了window.devicePixelRatio，
这个值一般用于根据屏幕的分辨率调整css的px大小，
因为多机位涉及到视口的定位，所以需要对渲染画布的分辨率也进行调整：

1
renderer.setPixelRatio(window.devicePixelRatio)

使用ArrayCamera，能够实现多机位拍摄的效果：

多机位拍摄
多机位拍摄
使用多机位拍摄的动态背景蒙版
使用多机位拍摄的动态背景蒙版

StereoCamera VR相机

StereoCamera官方文档

StereoEffect

SteareoEffect能够进行双屏渲染，通过VR头显设备，能够产生立体效果画面。

双屏显示原理

根据视差原理，左右眼单独接收到的信息各不相同，将各自的信息在大脑合成后，就能组合成对立体空间的感觉，
所以在用户佩戴VR头显时，左眼和右眼接收到的显示屏的图像略有差异，相当于对现实世界中左右眼接收到信息的差异，即模拟视察，
模拟出来的视差在大脑中合成了立体的视觉场景。

也就是SteareoEffect的效果为双屏渲染的基本原理。