推薦：將NSDT場景編輯器加入你的3D工具鏈。
其他系列工具：NSDT簡石數(shù)字孿生
Threejs如果想把三維場景Scene渲染到web網(wǎng)頁上，還需要定義一個(gè)虛擬相機(jī)Camera，就像你生活中想獲得一張照片，需要一臺用來拍照的相機(jī)。
透視投影相機(jī)PerspectiveCamera
Threejs提供了正投影相機(jī)OrthographicCamera (opens new window)和透視投影相機(jī)PerspectiveCamera (opens new window)。本節(jié)課先給大家比較常用的透視投影相機(jī)PerspectiveCamera。
透視投影相機(jī)PerspectiveCamera本質(zhì)上就是在模擬人眼觀察這個(gè)世界的規(guī)律。
相機(jī)位置.position
生活中用相機(jī)拍照，你相機(jī)位置不同，拍照結(jié)果也不同，threejs中虛擬相機(jī)同樣如此。
比如有一間房子，你拿著相機(jī)站在房間里面，看到的是房間內(nèi)部，站在房子外面看到的是房子外面效果。
相機(jī)對象Camera具有位置屬性.position，通過位置屬性.position可以設(shè)置相機(jī)的位置。
相機(jī)觀察目標(biāo).lookAt()
你用相機(jī)拍照你需要控制相機(jī)的拍照目標(biāo)，具體說相機(jī)鏡頭對準(zhǔn)哪個(gè)物體或說哪個(gè)坐標(biāo)。對于threejs相機(jī)而言，就是設(shè)置.lookAt()方法的參數(shù)，指定一個(gè)3D坐標(biāo)。
//相機(jī)觀察目標(biāo)指向Threejs 3D空間中某個(gè)位置
camera.lookAt(0, 0, 0); //坐標(biāo)原點(diǎn)
camera.lookAt(0, 10, 0);? //y軸上位置10
camera.lookAt(mesh.position);//指向mesh對應(yīng)的位置
判斷相機(jī)相對三維場景中長方體位置
你可以把三維場景中長方體mesh想象為一個(gè)房間，然后根據(jù)相機(jī)位置和長方體位置尺寸對比，判斷兩者相對位置。你可以發(fā)現(xiàn)設(shè)置相機(jī)坐標(biāo)(200, 200, 200)，位于長方體外面一處位置。
// 長方體尺寸100, 100, 100
const geometry = new THREE.BoxGeometry( 100, 100, 100 );
const mesh = new THREE.Mesh(geometry,material);
// 相機(jī)位置xyz坐標(biāo)：0,10,0
mesh.position.set(0,10,0);
// 相機(jī)位置xyz坐標(biāo)：200, 200, 200
camera.position.set(200, 200, 200);
定義相機(jī)渲染輸出的畫布尺寸
你生活中相機(jī)拍照的照片是有大小的，對于threejs而言一樣，需要定義相機(jī)在網(wǎng)頁上輸出的Canvas畫布(照片)尺寸，大小可以根據(jù)需要定義，這里先隨機(jī)定義一個(gè)尺寸。
Canvas畫布：課程中會把threejs虛擬相機(jī)渲染三維場景在瀏覽器網(wǎng)頁上呈現(xiàn)的結(jié)果稱為Canvas畫布。
// 定義相機(jī)輸出畫布的尺寸(單位:像素px)
const width = 800; //寬度
const height = 500; //高度
透視投影相機(jī)PerspectiveCamera：視錐體
透視投影相機(jī)的四個(gè)參數(shù)fov, aspect, near, far構(gòu)成一個(gè)四棱臺3D空間，被稱為視錐體，只有視錐體之內(nèi)的物體，才會渲染出來，視錐體范圍之外的物體不會顯示在Canvas畫布上。
// width和height用來設(shè)置Three.js輸出的Canvas畫布尺寸(像素px)
const width = 800; //寬度
const height = 500; //高度
// 30:視場角度, width / height:Canvas畫布寬高比, 1:近裁截面, 3000：遠(yuǎn)裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
PerspectiveCamera參數(shù)介紹：
PerspectiveCamera( fov, aspect, near, far )
參數(shù)含義默認(rèn)值
fov相機(jī)視錐體豎直方向視野角度50
aspect相機(jī)視錐體水平方向和豎直方向長度比，一般設(shè)置為Canvas畫布寬高比width / height1
near相機(jī)視錐體近裁截面相對相機(jī)距離0.1
far相機(jī)視錐體遠(yuǎn)裁截面相對相機(jī)距離，far-near構(gòu)成了視錐體高度方向2000
