THREE.js-照相機（Camera）

既然是通過相機來渲染場景，那麼沒有相機，我們也就什麼看不到了。THREE.js中提供了Camera類對相機這個角色進行抽象。相機將三維的場景投影到二維的屏幕，根據投影的方式不同，THREE.js中提供了幾種不同類型的相機。
戳這裡查看正交投影和透視投影的投影效果

正交投影與透視投影

我們先從上面的兩種圖來理解正交投影與透視投影，我覺得我們可以把正交投影理解為到面的投影，投影線垂直於投影面進行投影，因此物體投影之後的比例是保持不變的。而對於透視
投影我們可以理解為到點的投影，所有的投影線最後都將匯聚於一點，透視投影的特點就是近大遠小。 <喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KCjxwPtGnz7BDYW1lcmHWrsewztLDx8/Iwcu94tK7z8JUSFJFRS5qc9bQyrnTw7XE1/ix6s+1oaNUSFJFRS5qc8q508O1xMrH09LK1tf4serPtaOsz+vP89K7z8LT0srWztW/1dDEyK2jrMrW1rjN6sirtcS3vc/yvs3Kx7TTeNbhtb151uG1xLe9z/KjrLb4etbh1PK0udax09rK1ta4zeTH+rXEt73P8rTTIDxicj4KyK3Nt9bQ0MS0qbn9oaM8L3A+CgoKCjxoMiBpZD0="正交投影相機orthographiccamera">正交投影相機OrthographicCamera

構造函數

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

在上面正交投影的圖中，我們想象一樣，相機所在的地方有個平面，而相機所在的地點默認是平面的中心點。
那麼：left就是視錐左側面，right就是視錐右側面，top就是視錐上側面，而bottom就是視錐下側面。
near是到距離相機較近的那一面的距離，far是離距離相機較遠的那一面的距離，這六個投影面圍成的區域就是相機投影的可見區域。
三維空間內，只有在這個區域內的物體才會被相機看到。

實例說明

camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(0, 0, 5);

var cubeGeometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({
    color : 0xff0000,
    wireframe : true
})

var cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);
renderer.render(scene, camera);

首先我們實例化一個相機正交相機對象，相機的默認坐標是原點，和立方體重疊無法看到立方體，這裡我們設置一下相機的坐標(x,y,z)=(0,0,5)。

采用正交投影的時候，我們發現立方體的前端完全被後端遮蓋了，這就是正交投影和透視投影的區別，如果使用透視投影，那麼根據近大遠小的原則，靠近攝像機的一端的投影面積小於遠離相機一端的投影面積。

長寬比例

但是這裡有一個很奇怪的問題，命名創建的是一個長度為1的正方體，為啥投影是長方體？這裡canvas面板的長寬比是2:1，但是相機的（right-left）/(top-bottom)比例是4：3，因此
垂直方向上面被壓縮了，所以顯示的是一個長方體。

將（right-left）/(top-bottom)的比例同樣調整為2:1

camera = new THREE.OrthographicCamera(-2, 2, 1, -1, 1, 10)

相機位置

相機默認的坐標位置是（0,0,0），上面的例子中我們把相機的坐標設置為（0,0,5），即z軸上面。現在我們來移動相機的位置看看投影出來的立方是什麼樣子的。

camera.position.set(1, 0, 5)

在x軸方向把相機右移1個單位

發現相對於畫面中心，立方體往左移動了一個單位，很容易理解這裡的主體是相機，相機右移，那麼立方體相對於相機不就是左移了麼？

camera.position.set(2, -2, 5);

把相機挪動到立方體的下方？這個時候鏡頭裡面一片漆黑，看不到立方體了。因為鏡頭默認的方向是朝著z軸的負方向，我們讓它朝著原點即可。

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

透視投影相機（PerspectiveCamera）

構造函數

PerspectiveCamera(fov, aspect, near, far)
- fov 可視角度
- aspect 為width/height,通常設置為canvas元素的高寬比。
- near近端距離
- far遠端距離
只有離相機的距離大於near值，小於far值，且在相機的可視角度之內，才能被相機投影到。

實例說明

renderer = new THREE.WebGLRenderer();
renderer.setSize(400,300);
document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, 4/3, 1, 10000);

camera.position.set(0,0,5);
var mess = new THREE.Mesh(new THREE.CubeGeometry(1,1,1), new THREE.MeshBasicMaterial({
    color : 0xff0000,
    wireframe : true
}));

scene.add(mess);
renderer.render(mess, camera);

改變視角大小

camera = new THREE.PerspectiveCamera(60, 4/3, 1, 10000);

我們把視角由45度變為60度，發現立方體變小了，很容易理解，視角變大之後，可以看到的范圍變大了，但是立方體本身的大小沒有變，那麼相對於整個投影來說，立方體就變小了，不信你把眼睛睜大最大試試(￣▽￣)”。