前言

在ThreeJS學(xué)習(xí)：場(chǎng)景、模型、相機(jī)、渲染中介紹過(guò)，相機(jī)是3D場(chǎng)景繪制中不可缺少的部分，相機(jī)的位置、觀察角度等屬性的改變，都會(huì)影響到界面的展示，本章節(jié)介紹我們開(kāi)發(fā)中常用到的相機(jī)以及如何進(jìn)行設(shè)置。

一、透視投影相機(jī) PerspectiveCamera

創(chuàng)建一個(gè)投影相機(jī)

PerspectiveCamera( fov, aspect, near, far )

透視投影相機(jī)的四個(gè)參數(shù)fov, aspect, near, far構(gòu)成一個(gè)四棱臺(tái)3D空間，被稱為視錐體。
只有視錐體之內(nèi)的物體，才會(huì)渲染出來(lái)，視錐體范圍之外的物體不會(huì)顯示在屏幕上。

效果

• fov：設(shè)置相機(jī)視錐體豎直方向視野角度
• aspect：相機(jī)視錐體水平方向和豎直方向長(zhǎng)度比，一般設(shè)置為Canvas畫(huà)布寬高比width / height
• near: 相機(jī)視錐體近裁截面相對(duì)相機(jī)距離
• far: 相機(jī)視錐體遠(yuǎn)裁截面相對(duì)相機(jī)距離，far-near構(gòu)成了視錐體高度方向

二、正投影相機(jī) OrthographicCamera

創(chuàng)建一個(gè)正投影相機(jī)

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

正投影相機(jī) 的六個(gè)參數(shù)left, right, top, bottom，near，far構(gòu)成一個(gè)長(zhǎng)方體3D空間，被稱為長(zhǎng)方體可視化空間。
只有長(zhǎng)方體可視化空間之內(nèi)的物體，才會(huì)渲染出來(lái)，長(zhǎng)方體可視化空間之外的物體不會(huì)顯示在屏幕上。

效果

• left：渲染空間的左邊界
• right：渲染空間的右邊界
• top：渲染空間的上邊界
• bottom：渲染空間的下邊界
• near：表示的是從距離相機(jī)多遠(yuǎn)的位置開(kāi)始渲染，一般情況會(huì)設(shè)置一個(gè)很小的值
• far：表示的是距離相機(jī)多遠(yuǎn)的位置截止渲染，如果設(shè)置的值偏小小，會(huì)有部分場(chǎng)景看不到

三、實(shí)時(shí)更新相機(jī)屬性

相機(jī)的視野范圍直接影響到界面的展示，但是實(shí)際開(kāi)發(fā)中，界面的尺寸是可以實(shí)時(shí)變化的，為了不影響界面的展示，我們也要實(shí)時(shí)更新相機(jī)的視野范圍

// 監(jiān)聽(tīng)屏幕變化
window.onresize = function () {
    // width、height表示canvas畫(huà)布寬高度
    camera.aspect = width / height;
    // 更新
    camera.updateProjectionMatrix();
};

四、相機(jī)通用屬性

• position：用來(lái)設(shè)置相機(jī)在虛擬世界中的位置
• lookAt：用來(lái)設(shè)置觀察的地方，它與position屬性，共同設(shè)置了相機(jī)的觀察方向。
• up：設(shè)置相機(jī)對(duì)象的上方向?qū)傩?/li>

改變up屬性，就好比你生活中拍照時(shí)候，扭轉(zhuǎn)你的相機(jī)姿態(tài)角度進(jìn)行拍照，這時(shí)候你的照片也會(huì)跟著相機(jī)姿態(tài)旋轉(zhuǎn)。
默認(rèn)值：new THREE.Vector3(0,1,0)，意思是Y軸朝上
new THREE.Vector3(0,-1,0)，意思是Y軸朝下