前言

在開始正式講解透視攝像機前,我們先來理理three.js建模的流程。我們在開始建立一個模型的時候，首先需要建立我們模型需要的物體，這個物體可以是three.js中已經為我們封裝好的，比如正方體，球體，平面等，當然我們也可以通過匯入的方式匯入模型檔案。然後我們需要根據專案的需求為建立好的物體新增不同型別的材質，材質可以是紋理，顏色或者是貼圖。物體和材質通過new Mesh（）方法就會組合成一個網格mesh，這個時候我們會通過three.js提供的渲染方法將建立好的網格mesh渲染到場景scene中。這個時候你可能會發現，為什麼我的螢幕會一片漆黑，什麼都沒有，那是因為我們沒有新增光照，沒有光照的場景就好比身處一間沒有燈光的房間。當燈光新增完之後我們就可以看到場景裡我們建立的物體嗎？NO，這個時候就需要我們今天的主角登場了。

照相機扮演的角色

簡單來說照相機扮演的角色和我們看電影時放映機的角色差不多，照相機不斷的拍攝我們建立好的場景，然後通過渲染器渲染到螢幕中，最後在螢幕中展現出建立的3d場景。一般情況下，照相機是禁止的，但是如果我們想看到我們建立場景中更多的視野的時候，可以通過不斷的移動照相機來實現，如果一定要拿某一樣東西來比喻，那用我們的眼睛是再適合不過的了。

three.js中照相機型別

three.js中提供了兩種基本的照相機，分別是正投影相機OrthographicCamera和透視投影相機PerspectiveCamera。透視投影照相機對應投影到的物體的大小是隨著距離逐漸變小的，而正投影照相機投影到的物體大小是不受距離影響的。兩者區別可以通過下圖簡單說明：

雖然three.js中有正投影相機和透視投影相機兩種，但是這篇文章僅僅涉及透視投影相機，正投影相機相關的知識點講解會在後續提供。

透視投影相機說明

透視投影相機模式一般用來模擬人眼所看到的景象，它是3D場景的渲染中使用得最普遍的投影模式，建立一個簡單透視投影相機的程式碼如下：

1 var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
2 scene.add( camera );

上述程式碼中，new THREE.PerspectiveCamera建構函式用來建立透視投影相機，該建構函式總共有四個引數，分別是fov，aspect，near，far 。fov表示攝像機視錐體垂直視野角度，最小值為0，最大值為180，預設值為50，實際專案中一般都定義45，因為45最接近人正常睜眼角度；aspect表示攝像機視錐體長寬比，預設長寬比為1，即表示看到的是正方形，實際專案中使用的是螢幕的寬高比；near表示攝像機視錐體近端面，這個值預設為0.1，實際專案中都會設定為1；far表示攝像機視錐體遠端面，預設為2000，這個值可以是無限的，說的簡單點就是我們視覺所能看到的最遠距離。

除了上述四個基本屬性之外，透視投影相機六個屬性，分別是：filmGauge，filmOffset，focus，isPerspectiveCamera，view，zoom。這幾個引數在實際應用中很少用到，基本都保持預設值。如果想了解各屬性的意義及完成的功能可以通過官方文件去了解。

透視投影相機位置說明

透視投影相機的位置和position，up，lookAt有關係。position用來指定相機在三維座標中的位置，up用來指定相機拍攝時相機頭頂的方向，lookAt表示相機拍攝時指向的中心點。具體的設定如下程式碼：

 1 // 統一設定position中xyz座標
 2 camera.position.set(0,0,0);
 3 
 4 // 單獨設定position中特定座標
 5 camera.position.x = 0;
 6 camera.position.y = 0;
 7 camera.position.z = 0;
 8 
 9 // 統一設定up中xyz座標
10 camera.up.set(0,1,0);
11 
12 // 單獨設定up中特定座標
13 camera.up.x = 0;
14 camera.up.y = 1;
15 camera.up.z = 0;
16 
17 // lookAt設定必須統一設定
18 camera.lookAt({
19     x:0,
20     y:0,
21     z:0
22 });

 透視投影相機例項

為了能夠更好的讓讀者能夠理解透視投影相機的特性和工作原理，我做了一個例項demo，demo中我建立了一個網格平面，這個平面上有16個跳舞的機器人，為了能夠有光感，特意加了一個亮度為0.2的白色自然光，相機拍攝過程中為了著重顯示拍攝位置，在相機上添加了一個亮度為0.8的點光源，同時，為了不至於讓建立的網格和跳舞機器人離開視野，所以lookAt使用預設值，只想中心位置，up值也使用預設值，方向與y軸一致，通過改變position對應各座標軸的值來讓人感覺有攝影的感覺。

 例項效果圖如下：

後話

希望上述講解對於您掌握透視投影相機有幫助。

預覽地址：深入理解Three.js中透視投影照相機PerspectiveCamera

下載地址：深入理解Three.js中透視投影照相機PerspectiveCamera

&n