前言
在開始正式講解透視攝像機前,我們先來理理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