前言

在開始正式講解透視攝像機(jī)前,我們先來理理three.js建模的流程。我們在開始創(chuàng)建一個模型的時候，首先需要創(chuàng)建我們模型需要的物體，這個物體可以是three.js中已經(jīng)為我們封裝好的，比如正方體，球體，平面等，當(dāng)然我們也可以通過導(dǎo)入的方式導(dǎo)入模型文件。然后我們需要根據(jù)項目的需求為創(chuàng)建好的物體添加不同類型的材質(zhì)，材質(zhì)可以是紋理，顏色或者是貼圖。物體和材質(zhì)通過new Mesh（）方法就會組合成一個網(wǎng)格mesh，這個時候我們會通過three.js提供的渲染方法將創(chuàng)建好的網(wǎng)格mesh渲染到場景scene中。這個時候你可能會發(fā)現(xiàn)，為什么我的屏幕會一片漆黑，什么都沒有，那是因為我們沒有添加光照，沒有光照的場景就好比身處一間沒有燈光的房間。當(dāng)燈光添加完之后我們就可以看到場景里我們創(chuàng)建的物體嗎？NO，這個時候就需要我們今天的主角登場了。

照相機(jī)扮演的角色

簡單來說照相機(jī)扮演的角色和我們看電影時放映機(jī)的角色差不多，照相機(jī)不斷的拍攝我們創(chuàng)建好的場景，然后通過渲染器渲染到屏幕中，最后在屏幕中展現(xiàn)出創(chuàng)建的3d場景。一般情況下，照相機(jī)是禁止的，但是如果我們想看到我們創(chuàng)建場景中更多的視野的時候，可以通過不斷的移動照相機(jī)來實(shí)現(xiàn)，如果一定要拿某一樣?xùn)|西來比喻，那用我們的眼睛是再適合不過的了。

three.js中照相機(jī)類型

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

雖然three.js中有正投影相機(jī)和透視投影相機(jī)兩種，但是這篇文章僅僅涉及透視投影相機(jī)，正投影相機(jī)相關(guān)的知識點(diǎn)講解會在后續(xù)提供。

透視投影相機(jī)說明

透視投影相機(jī)模式一般用來模擬人眼所看到的景象，它是3D場景的渲染中使用得最普遍的投影模式，創(chuàng)建一個簡單透視投影相機(jī)的代碼如下：

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

上述代碼中，new THREE.PerspectiveCamera構(gòu)造函數(shù)用來創(chuàng)建透視投影相機(jī)，該構(gòu)造函數(shù)總共有四個參數(shù)，分別是fov，aspect，near，far 。fov表示攝像機(jī)視錐體垂直視野角度，最小值為0，最大值為180，默認(rèn)值為50，實(shí)際項目中一般都定義45，因為45最接近人正常睜眼角度；aspect表示攝像機(jī)視錐體長寬比，默認(rèn)長寬比為1，即表示看到的是正方形，實(shí)際項目中使用的是屏幕的寬高比；near表示攝像機(jī)視錐體近端面，這個值默認(rèn)為0.1，實(shí)際項目中都會設(shè)置為1；far表示攝像機(jī)視錐體遠(yuǎn)端面，默認(rèn)為2000，這個值可以是無限的，說的簡單點(diǎn)就是我們視覺所能看到的最遠(yuǎn)距離。

除了上述四個基本屬性之外，透視投影相機(jī)六個屬性，分別是：filmGauge，filmOffset，focus，isPerspectiveCamera，view，zoom。這幾個參數(shù)在實(shí)際應(yīng)用中很少用到，基本都保持默認(rèn)值。如果想了解各屬性的意義及完成的功能可以通過官方文檔去了解。

透視投影相機(jī)位置說明

透視投影相機(jī)的位置和position，up，lookAt有關(guān)系。position用來指定相機(jī)在三維坐標(biāo)中的位置，up用來指定相機(jī)拍攝時相機(jī)頭頂?shù)姆较颍琹ookAt表示相機(jī)拍攝時指向的中心點(diǎn)。具體的設(shè)置如下代碼：

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

透視投影相機(jī)實(shí)例

為了能夠更好的讓讀者能夠理解透視投影相機(jī)的特性和工作原理，我做了一個實(shí)例demo，demo中我創(chuàng)建了一個網(wǎng)格平面，這個平面上有16個跳舞的機(jī)器人，為了能夠有光感，特意加了一個亮度為0.2的白色自然光，相機(jī)拍攝過程中為了著重顯示拍攝位置，在相機(jī)上添加了一個亮度為0.8的點(diǎn)光源，同時，為了不至于讓創(chuàng)建的網(wǎng)格和跳舞機(jī)器人離開視野，所以lookAt使用默認(rèn)值，只想中心位置，up值也使用默認(rèn)值，方向與y軸一致，通過改變position對應(yīng)各坐標(biāo)軸的值來讓人感覺有攝影的感覺。

實(shí)例效果圖如下：

后話

希望上述講解對于您掌握透視投影相機(jī)有幫助。

預(yù)覽地址：深入理解Three.js中透視投影照相機(jī)PerspectiveCamera

總結(jié)

以上是生活随笔為你收集整理的深入理解Three.js中透视投影照相机PerspectiveCamera的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。