簡(jiǎn)述
在前面的章節(jié)中锌历,已經(jīng)使用PerspectiveCamera創(chuàng)建過(guò)相機(jī)希坚,但是文檔中還有其他類型的相機(jī)殴穴。
Camera相機(jī)
Camera類是抽象類柴钻,不能直接使用它淮韭,但可以繼承這個(gè)類,從而使用它的公共屬性和方法贴届。
ArrayCamera陣列相機(jī)
ArrayCamera陣列相機(jī)用于多個(gè)相機(jī)多次渲染場(chǎng)景靠粪。每個(gè)相機(jī)渲染畫布的特定區(qū)域蜡吧,就像是老式分屏游戲,多個(gè)人共享一個(gè)屏幕占键。
StereoCamera立體相機(jī)
StereoCamera立體相機(jī)用于演示VR效果昔善。
CubeCamera立方體相機(jī)
CubeCamera立方體相機(jī)用來(lái)獲取各個(gè)方向上的渲染結(jié)果,僅限于前后左右上下這六個(gè)方向畔乙【停可以使用這個(gè)相機(jī)來(lái)創(chuàng)建環(huán)境貼圖和陰影。
OrthographicCamera正交相機(jī)
OrthographicCamera正交相機(jī)用于進(jìn)行無(wú)透視的正交渲染牲距,常用于各種RTS游戲返咱。元素在屏幕上的大小與離相機(jī)的距離無(wú)關(guān)。
PerspectiveCamera透視相機(jī)
PerspectiveCamera透視相機(jī)就是常用的相機(jī)牍鞠。
PerspectiveCamera透視相機(jī)和OrthographicCamera正交相機(jī)是最常用的咖摹。
PerspectiveCamera透視相機(jī)
PerspectiveCamera透視相機(jī)實(shí)例化時(shí),需要傳入?yún)?shù)难述,但之前并沒有傳入所有的參數(shù)萤晴。
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 100)
視場(chǎng)角
第一個(gè)參數(shù)是視場(chǎng)角,即相機(jī)視圖的豎直方向的角度胁后。如果這個(gè)角度小店读,會(huì)得到望遠(yuǎn)鏡的效果;這個(gè)角度大择同,會(huì)得到魚眼鏡的效果两入。因?yàn)橄鄼C(jī)視角內(nèi)的東西將會(huì)壓縮在畫布尺寸大小。
一般取值45~75度敲才。
長(zhǎng)寬比
第二個(gè)參數(shù)是長(zhǎng)寬比裹纳,為寬度比高度〗粑洌可以簡(jiǎn)單的理解為寬度和高度剃氧。
近點(diǎn)和遠(yuǎn)點(diǎn)
第三、第四個(gè)參數(shù)為近點(diǎn)和遠(yuǎn)點(diǎn)阻星,對(duì)應(yīng)相機(jī)能看到的最近和最遠(yuǎn)的距離朋鞍。任何比近點(diǎn)近和比遠(yuǎn)點(diǎn)遠(yuǎn)的對(duì)象都不會(huì)被渲染。
為了顯示的更加全面妥箕,可能會(huì)想用比如0.0001和9999999這樣的值作為近點(diǎn)和遠(yuǎn)點(diǎn)滥酥,這會(huì)導(dǎo)致一個(gè)BUG,這個(gè)BUG會(huì)導(dǎo)致兩個(gè)面重疊畦幢。
通常情況下坎吻,使用0.1和100
OrthographicCamera正交相機(jī)
這個(gè)相機(jī)常用于特殊類型的用途。
OrthographicCamera正交相機(jī)不存在透視關(guān)系宇葱,相同大小的物體無(wú)論遠(yuǎn)近瘦真,都會(huì)渲染出相同的大小刊头。
OrthographicCamera正交相機(jī)的參數(shù)與PerspectiveCamera透視相機(jī)參數(shù)有很大差別。
需要在攝像機(jī)的每個(gè)方向上設(shè)置看到的距離诸尽,即左原杂、右、上您机、下穿肄,而非視場(chǎng)角,然后际看,再設(shè)置近點(diǎn)被碗、遠(yuǎn)點(diǎn)。
注釋之前的PerspectiveCamera透視相機(jī)仿村,并添加OrthographicCamera正交相機(jī)。保留position位置更新部分兴喂,并調(diào)用lookAt()函數(shù)
const camera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0.1, 100)
此時(shí)蔼囊,畫布中的渲染結(jié)果沒有透視,而且立方體各個(gè)面看上去是平行的衣迷。并且現(xiàn)在有個(gè)問(wèn)題畏鼓,立方體看起來(lái)不像立方體。
這是由于對(duì)左壶谒、右云矫、上、下提供的值是1或者-1汗菜,等同于是渲染一個(gè)正方形的區(qū)域让禀,但正方形區(qū)域會(huì)被畫布拉伸到匹配畫布尺寸,同時(shí)陨界,由于畫布不是正方形巡揍,畫面便扭曲了。
需要使用畫布的長(zhǎng)寬比菌瘪,因此創(chuàng)建一個(gè)變量aspectRatio存儲(chǔ)長(zhǎng)寬比
const aspectRatio = sizes.width / sizes.height
const camera = new THREE.OrthographicCamera(- 1 * aspectRatio, 1 * aspectRatio, 1, - 1, 0.1, 100)