深入理解Three.js中透視投影照相機PerspectiveCamera

前言

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

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

three.js中照相機類型
three.js中提供了兩種基本的照相機,分別是正投影相機OrthographicCamera和透視投影相機PerspectiveCamera。透視投影照相機對應投影到的物體的大小是隨着距離逐漸變小的,而正投影照相機投影到的物體大小是不受距離影響的。兩者區別可以通過下圖簡單說明:
在這裏插入圖片描述
雖然three.js中有正投影相機和透視投影相機兩種,但是這篇文章僅僅涉及透視投影相機,正投影相機相關的知識點講解會在後續提供。

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

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
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表示相機拍攝時指向的中心點。具體的設置如下代碼:

// 統一設置position中xyz座標
camera.position.set(0,0,0);
 
// 單獨設置position中特定座標
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 0;
 
// 統一設置up中xyz座標
camera.up.set(0,1,0);

// 單獨設置up中特定座標
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;

// lookAt設置必須統一設置
camera.lookAt({
    x:0,
    y:0,
    z:0
});

透視投影相機實例

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

實例效果圖如下:
在這裏插入圖片描述

後話

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

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

發佈了19 篇原創文章 · 獲贊 4 · 訪問量 4289
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章