13 Three.js照相機的正交投影和透視投影

這一篇文章會的人也不看，不會的人也不需要專業術語，我直接大白話介紹一下webgl裡面的照相機。

照相機就相當於在模型世界中，設定一個位置，將前方的內容拍攝下來，然後再給canvas，在視窗裡面顯示出來在當前位置的影像。

再說的簡單一些，就相當於我們拿著手機拍了一張照片，放到了視窗裡面顯示出來。而動畫則是一直拍，一直顯示而已。

因為繪製出來的圖形是3d的，而我們的螢幕只能顯示2d的圖片。所以，在成像的時候我們需要設定投影的方式，來獲取形成的影像。

正交投影：

形成的影像都是標準的尺寸大小，不會產生偏差。

一般使用在建模，工業上面。

使用：

正交投影照相機（Orthographic Camera）設定起來較為直觀，它的建構函式是：

THREE.OrthographicCamera(left, right, top, bottom, near, far)

這六個引數分別代表正交投影照相機拍攝到的空間的六個面的位置，這兩個面圍成一個長方體，我們稱其為視景體（Frustum）。只有在視景體內部（下圖中的灰色部分）的物體才可能顯示在螢幕上，而視景體外的物體會在顯示之前被裁減掉。

為了保持照相機的橫豎比例，需要保證 (right - left) 與 (top - bottom) 的比例與 Canvas寬度與高度的比例一致。

near 與 far 都是指到照相機位置在深度平面的位置，而照相機不應該拍攝到其後方的物體，因此這兩個值應該均為正值。為了保證場景中的物體不會因為太近或太遠而被照相機忽略，一般 near 的值設定得較小， far 的值設定得較大，具體值視場景中物體的位置等決定。

設定相機的拍攝方向：

camera.position.set(x, y, z);

上面是設定相機的位置

camera.lookAt(new THREE.Vector3(0, 0, 0));

上面是設定相機觀察的方向，上面是預設原點

不過一定要注意， lookAt 函式接受的是一個 THREE.Vector3 的例項，因此千萬別寫成camera.lookAt(0, 0, 0) ，否則非但不能得到理想的效果，而且不會報錯，使你很難找到問題所在。

透視投影：

更接近人眼的觀看效果，有“近大遠小”的效果。

應用比較廣泛，只要不是正交的應用，基本上使用透視投影就好了。

使用：

透視投影照相機（Perspective Camera）的建構函式是：

THREE.PerspectiveCamera(fov, aspect, near, far)

透檢視中，灰色的部分是視景體，是可能被渲染的物體所在的區域。 fov 是視景體豎直方向上的張角（是角度制而非弧度制），如側檢視所示。

aspect 等於 width / height ，是照相機水平方向和豎直方向長度的比值，通常設為Canvas 的橫縱比例。

near 和 far 分別是照相機到視景體最近、最遠的距離，均為正值，且 far 應大於near 。

fov的值越大，裡面的圖形會顯得越小。這是為什麼？我們從下面的的側檢視來看，雖然正方體的實際大小並未改變，但是將照相機的豎直張角設定更大是，視景體變大了，因而正方體相對於整個視景體的大小就變小了，看起來正方形就顯得變小了。

fov不會改變畫面的橫豎比例，aspect能夠改變。

本節參考了three.js入門指南