前言

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

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

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

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

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

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

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

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

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

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

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

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

透視投影相機(jī)的位置和position，up，lookAt有關(guān)系。position用來(lái)指定相機(jī)在三維坐標(biāo)中的位置，up用來(lái)指定相機(jī)拍攝時(shí)相機(jī)頭頂?shù)姆较颍琹ookAt表示相機(jī)拍攝時(shí)指向的中心點(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ī)的特性和工作原理，我做了一個(gè)實(shí)例demo，demo中我創(chuàng)建了一個(gè)網(wǎng)格平面，這個(gè)平面上有16個(gè)跳舞的機(jī)器人，為了能夠有光感，特意加了一個(gè)亮度為0.2的白色自然光，相機(jī)拍攝過(guò)程中為了著重顯示拍攝位置，在相機(jī)上添加了一個(gè)亮度為0.8的點(diǎn)光源，同時(shí)，為了不至于讓創(chuàng)建的網(wǎng)格和跳舞機(jī)器人離開(kāi)視野，所以lookAt使用默認(rèn)值，只想中心位置，up值也使用默認(rèn)值，方向與y軸一致，通過(guò)改變position對(duì)應(yīng)各坐標(biāo)軸的值來(lái)讓人感覺(jué)有攝影的感覺(jué)。

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

后話

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

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

總結(jié)

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

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