Three.js相機對象(正投影OrthographicCamera、透視投影PerspectiveCamera)

Three.js相機對象(正投影OrthographicCamera、透視投影PerspectiveCamera)

針對不一樣應用的三維場景須要使用不一樣的投影方式，好比機械、工業設計領域經常採用正投影(平行投影), 遊戲場景每每採用透視投影(中心投影)。爲了完成三維場景不一樣的投影方式，three.js封裝WebGL API和相關算法，提供了正投影OrthographicCamera、透視投影PerspectiveCamera等相機對象。

我的WebGL/Three.js技術博客

正投影和透視投影簡單解釋

下面對正投影相機和透視投影相機的投影算法進行簡單介紹，對於初學者你有一個印象就能夠，若是想深刻了解，能夠學習圖形學或者閱讀threejs官方源碼src目錄下文件OrthographicCamera.js和PerspectiveCamera.js

生活中的物體都是三維的，可是人的眼睛只能看到正面，不能看到被遮擋的背面，三維幾何體在人眼睛中的效果就像一張相機拍攝的二維照片，你看到的是一個2D的投影圖。 空間幾何體轉化爲一個二維圖的過程就是投影，不一樣的投影方式意味着投影尺寸不一樣的算法。

生活中的物體都是三維的，可是人的眼睛只能看到正面，不能看到被遮擋的背面，三維幾何體在人眼睛中的效果就像一張相機拍攝的二維照片，你看到的是一個2D的投影圖。 空間幾何體轉化爲一個二維圖的過程就是投影，不一樣的投影方式意味着不一樣的算法。

對於正投影而言，一條直線放置的角度不一樣，投影在投影面上面的長短不一樣；對於透視投影而言，投影的結果除了與幾何體的角度有關，還和距離相關， 人的眼睛觀察世界就是透視投影，好比你觀察一條鐵路距離越遠你會感到兩條軌道之間的寬度越小。不管正投影仍是透視投影，three.js都對相關的投影算法進行了封裝， 你們只須要根據不一樣的應用場景自行選擇不一樣的投影方式。使用OrthographicCamera相機對象的時候，three.js會按照正投影算法自動計算幾何體的投影結果； 使用PerspectiveCamera相機對象的時候，three.js會按照透視投影算法自動計算幾何體的投影結果。

正投影相機對象OrthographicCamera

構造函數格式：OrthographicCamera( left, right, top, bottom, near, far )

OrthographicCamera構造函數參數列表，參數的數據類型都是number。

• left——渲染空間的左邊界
• right——渲染空間的右邊界
• top——渲染空間的上邊界
• bottom——渲染空間的下邊界
• near——near屬性表示的是從距離相機多遠的位置開始渲染，通常狀況會設置一個很小的值。 默認值0.1
• far——far屬性表示的是距離相機多遠的位置截止渲染，若是設置的值偏小小，會有部分場景看不到。 默認值1000

三維場景中座標值不在三維空間中的網格模型不會被渲染出來，會被剪裁掉，好比你把上面代碼中far參數的值從1000更改成420，你會發現長方體的一部分沒法顯示。

注意：左右邊界的距離與上下邊界的距離比值與畫布的渲染窗口的寬高比例要一致，不然三維模型的顯示效果會被單方向不等比例拉伸

OrthographicCamera構造函數本質上是對WebGL投影矩陣的封裝，寬度width、高度height越大，三維模型頂點的位置座標就會越大，超出可視區域的網格模型就會被剪裁掉， 不會再顯示在屏幕上，你們還能夠看到參數left與right、參數式top與bottom互爲相反數，這樣作的目的是可以是lookAt指向的對象可以顯示在canvas畫布的中間位置。

/**
 * 正投影相機設置
 */
var width = window.innerWidth; //窗口寬度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口寬高比
var s = 200; //三維場景顯示範圍控制係數，係數越大，顯示的範圍越大
//建立相機對象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //設置相機位置
camera.lookAt(scene.position); //設置相機方向(指向的場景對象)

透視投影相機對象PerspectiveCamera

構造函數格式：PerspectiveCamera( fov, aspect, near, far )

PerspectiveCamera構造函數參數列表，參數的數據類型都是number。

• fov——fov表示視場，所謂視場就是可以看到的角度範圍，人的眼睛大約可以看到180度的視場，視角大小設置要根據具體應用，通常遊戲會設置60~90度。 默認值45
• aspect——aspect表示渲染窗口的長寬比，若是一個網頁上只有一個全屏的canvas畫布且畫布上只有一個窗口，那麼aspect的值就是網頁窗口客戶區的寬高比 window.innerWidth/window.innerHeight
• near——near屬性表示的是從距離相機多遠的位置開始渲染，通常狀況會設置一個很小的值。 默認值0.1
• far——far屬性表示的是距離相機多遠的位置截止渲染，若是設置的值偏小小，會有部分場景看不到。 默認值1000

/**
 * 透視投影相機設置
 */
var width = window.innerWidth; //窗口寬度
var height = window.innerHeight; //窗口高度
/**透視投影相機對象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(200, 300, 200); //設置相機位置
camera.lookAt(scene.position); //設置相機方向(指向的場景對象)

camera對象的基類是Object3D,具備.posiiotn屬性，經過position屬性設置相機的位置。 lookAt方法用來指定相機拍攝對象的座標位置，.lookAt()方法的參數是Vector3對象，能夠手動定義new THREE.Vector3(x,y,z), 實際開發的時候，你但願相機對準那個對象，就返回那個對象的位置屬性值，好比上面代碼中的scene.position， 就表示返回scene的位置座標，若是把scene換成網格模型對象就是mesh.position，上面的網格模型是一個立方體， 具體的position屬性值就是立方體的幾何中心。經過觀察點的位置和lookAt方法指向的位置就能夠計算出相機的拍攝角度。

對於的透視投影，相機位置與lookAt指向的觀察目標位置越小，場景中的三維模型放大倍數越大，同時超出的部分會被剪裁掉， 好比更改上面代碼camera.position.set(100,200,200);爲(20,20,20)，測試結果你會發現立方體幾何體放大顯示，超出區域被剪裁。
若是是觀察一個產品外觀效果，相機就位於幾何體的外面，若是是室內漫遊預覽，就把相機放在房間三維模型的內部。