ThreeJs 認識相機

1、前言

3D 世界中的相機是一個抽象的描述，其模擬了咱們在真實世界中透過相機來看世界的這麼一個場景。當咱們透過相機來看這個世界時，在相機的鏡頭可見範圍內的物體就仍然被咱們所見到，而不在其範圍內的物體則好像被裁剪出去了。最後，當咱們按下拍照按鈕後，本來咱們所見的真實的 3 維世界則變成了一張 2D 的相片。

咱們在選擇不一樣相機的鏡頭時，所獲得的效果是不同的。在 3D 世界中，選擇不一樣的相機，就能夠當作是選擇不一樣的相機鏡頭，其獲得的效果也是不同的。

2、概述

相機自己就是一個 Object3D 對象。通常咱們經常使用的是 PerspectiveCamera 和 OrthographicCamera。

3、認識相機

1.Camera

2.OrthographicCamera

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
複製代碼

3.PerspectiveCamera

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );
複製代碼

4.StereoCamera

5.CubeCamera

// Create cube camera
var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
scene.add( cubeCamera );

// Create car
var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget } );
var car = new Mesh( carGeometry, chromeMaterial );
scene.add( car );

// Update the render target cube
car.setVisible( false );
cubeCamera.position.copy( car.position );
cubeCamera.update( renderer, scene );

// Render the scene
car.setVisible( true );
renderer.render( scene, camera );
複製代碼

6.ArrayCamera

var cameras = [];

				for ( var y = 0; y < AMOUNT; y ++ ) {

					for ( var x = 0; x < AMOUNT; x ++ ) {

						var subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
						subcamera.bounds = new THREE.Vector4( x / AMOUNT, y / AMOUNT, SIZE, SIZE );
						subcamera.position.x = ( x / AMOUNT ) - 0.5;
						subcamera.position.y = 0.5 - ( y / AMOUNT );
						subcamera.position.z = 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;
複製代碼

4、總結

在目前的實際項目中，通常使用的就是 PerspectiveCamera，其餘相機幾乎沒有用過。所以，先掌握好 PerspectiveCamera 應該就能應會大部分需求了。