three.js 之 Camera

基础知识

1. 右手坐标系
   
2. 相机默认是由正z轴看像-z轴（相机镜头对着-z轴方向拍），就是我们由屏幕外向屏幕内看一样。
3. 相机默认y轴为上方

定义

照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。

camera种类

PerspectiveCamera(透视相机)

这种投影模式是被设计用来模拟人类眼睛观察事物的方式。这是3d渲染中最经常使用的投影模式

1. 演示

   • 小鸟
   • 立方体
   • 可交互立方体

2. 代码示例

   const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
   scene.add( camera );

3. 源码

   function PerspectiveCamera( fov, aspect, near, far ) {
       // 继承 Camera 的方法和属性
       Camera.call( this );
       // 设置相机类型为 PerspectiveCamera
       this.type = 'PerspectiveCamera';
       
       // 没有设置可视角度，默认视角为50度
       this.fov = fov !== undefined ? fov : 50;
       // 设置 zoom 为 1
       this.zoom = 1;
       
       // 没有设置近端距离，默认为 0.1
       this.near = near !== undefined ? near : 0.1;
       // 没有设置远端距离，默认为 2000
       this.far = far !== undefined ? far : 2000;
       // 设置 focus 为 10
       this.focus = 10;
       
       // 没有设置宽/高比，默认设置为 1
       this.aspect = aspect !== undefined ? aspect : 1;
       this.view = null;
   
       // 胶片尺寸，默认35mm镜头
       this.filmGauge = 35;    // width of the film (default in millimeters)
       // 水平偏移，单位mm，默认值0
       this.filmOffset = 0;    // horizontal film offset (same unit as gauge)
   
       // 调用 updateProjectionMatrix 方法，更新相机的投影矩阵
       this.updateProjectionMatrix();
   
   }

4. 构造函数

   PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

   • fov: 可视角度
   • aspect: 为width/height,通常设置为canvas元素的高宽比。
   • near: 近端距离
   • far: 远端距离
5. 透视投影
   

OrthographicCamera(正交相机)

使用这种投影模式，无论物体离照相机的距离是多少，物体的大小始终保持不变。这在渲染2d场景、UI元素以及其他场景是很有用的。

1. 演示

   • 正方体
   • 可交互正方体

2. 代码示例

   const width = window.innerWidth;
   const height = window.innerHeight;
   const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
   scene.add( camera );

3. 源码

   function OrthographicCamera( left, right, top, bottom, near, far ) {
       // 继承 Camera 的方法和属性
       Camera.call( this );
   
       // 设置相机类型为 OrthographicCamera
       this.type = 'OrthographicCamera';
       
       // 缩放比例设置为1，视角设置为 null
       this.zoom = 1;
       this.view = null;
   
       // 设置左，右，上，下侧面的位置
       this.left = left;
       this.right = right;
       this.top = top;
       this.bottom = bottom;
   
       // 设置近端距离和远端距离。默认分别为0.1 和 2000
       this.near = ( near !== undefined ) ? near : 0.1;
       this.far = ( far !== undefined ) ? far : 2000;
       
       // 调用 updateProjectionMatrix 方法，更新相机的投影矩阵
       this.updateProjectionMatrix();
   
   }

4. 构造函数

   OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

   • left: 视锥左侧面
   • right: 视锥右侧面
   • top: 视锥上侧面
   • bottom: 视锥下侧面
   • near: 近端距离
   • far: 远端距离
5. 正交投影
   

CubeCamera(立方体相机或全景相机)

在 WebGLRenderTargetCube 中渲染6个照相机

1. 演示

   • 动态cubemap
   • 物体

2. 代码示例

   const cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
   scene.add( cubeCamera );

3. 构造函数

   CubeCamera( near : Number, far : Number, cubeResolution : Number )

   • near: 近端距离
   • far: 远端距离
   • cubeResolution: 立方体的长度

4. 源码解读

   function CubeCamera( near, far, cubeResolution ) {
       // 继承 Object3D 的方法和属性
       Object3D.call( this );
       
       // 设置相机类型为 CubeCamera
       this.type = 'CubeCamera';
   
       // 设置视角为90度，宽/高比为1
       var fov = 90, aspect = 1;
   
       // 设置6个相机
       // 立方体右侧镜头
       var cameraPX = new PerspectiveCamera( fov, aspect, near, far );
       cameraPX.up.set( 0, - 1, 0 );
       cameraPX.lookAt( new Vector3( 1, 0, 0 ) );
       this.add( cameraPX );
   
       // 立方体左侧镜头
       var cameraNX = new PerspectiveCamera( fov, aspect, near, far );
       cameraNX.up.set( 0, - 1, 0 );
       cameraNX.lookAt( new Vector3( - 1, 0, 0 ) );
       this.add( cameraNX );
   
       // 立方体前侧镜头
       var cameraPY = new PerspectiveCamera( fov, aspect, near, far );
       cameraPY.up.set( 0, 0, 1 );
       cameraPY.lookAt( new Vector3( 0, 1, 0 ) );
       this.add( cameraPY );
   
       // 立方体后侧镜头
       var cameraNY = new PerspectiveCamera( fov, aspect, near, far );
       cameraNY.up.set( 0, 0, - 1 );
       cameraNY.lookAt( new Vector3( 0, - 1, 0 ) );
       this.add( cameraNY );
   
       // 立方体上侧镜头
       var cameraPZ = new PerspectiveCamera( fov, aspect, near, far );
       cameraPZ.up.set( 0, - 1, 0 );
       cameraPZ.lookAt( new Vector3( 0, 0, 1 ) );
       this.add( cameraPZ );
   
       // 立方体下侧镜头
       var cameraNZ = new PerspectiveCamera( fov, aspect, near, far );
       cameraNZ.up.set( 0, - 1, 0 );
       cameraNZ.lookAt( new Vector3( 0, 0, - 1 ) );
       this.add( cameraNZ );
   
       var options = { format: RGBFormat, magFilter: LinearFilter, minFilter: LinearFilter };
   
       // 创建渲染目标对象，设置它的材质名称为 CubeCamera
       this.renderTarget = new WebGLRenderTargetCube( cubeResolution, cubeResolution, options );
       this.renderTarget.texture.name = "CubeCamera";
   
   }

5. 立方体相机
   
6. 参考

StereoCamera(3D相机)

双相机，被用于需要3d立体效果，视差栅栏的场景

1. 演示

   • 3d立体效果
   • 视差栅栏

2. 代码示例

   const _stereo = new THREE.StereoCamera();
   const size = {
       width: window.innerWidth,
       height: window.innerHeight
   };
   _stereo.aspect = 0.5;
   _stereo.eyeSep = 0.064;
   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 );

3. 源码

   function StereoCamera() {
       // 设置相机类型为 StereoCamera
       this.type = 'StereoCamera';
   
       // 设置宽高比为 1
       this.aspect = 1;
   
       this.eyeSep = 0.064;
   
       this.cameraL = new PerspectiveCamera();
       this.cameraL.layers.enable( 1 );
       this.cameraL.matrixAutoUpdate = false;
   
       this.cameraR = new PerspectiveCamera();
       this.cameraR.layers.enable( 2 );
       this.cameraR.matrixAutoUpdate = false;
   
   }

4. 构造函数

   StereoCamera( )

5. 3D相机