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相機