在第一課里,，我向您承諾過會(huì)對(duì)相機(jī)進(jìn)行一些介紹,，那么今天就是我履行諾言的時(shí)刻了。嘿,，這一刻,，有點(diǎn)激動(dòng),，想到相機(jī),，大學(xué)時(shí)，一直想買一個(gè)單反,，但是要1萬多,。工作后，當(dāng)一個(gè)月的工資就能買一個(gè)單反時(shí),，內(nèi)心充滿了驕傲和自豪,。所以，各位大大們,，技術(shù)還是有用的，至少技術(shù)可以用來掙錢,。

家有萬貫,，不如一技在手,，加油。

對(duì)WebGL感興趣,，還不知道如何入門的大大們，看看本教程吧,，我有信心看完本教程,，特別是看完本教程的中級(jí)和高級(jí)篇，你應(yīng)該對(duì)3D世界有一個(gè)自己的理解了,。使用你做的絢麗的demo去找一份不做的工作,，就應(yīng)該沒有問題。

那我們今天的主題是三維空間的觀察,。

1,、 認(rèn)識(shí)相機(jī)

在Threejs中相機(jī)的表示是THREE.Camera，它是相機(jī)的抽象基類,，其子類有兩種相機(jī),，分別是正投影相機(jī)THREE.OrthographicCamera和透視投影相機(jī)THREE.PerspectiveCamera,。類圖如下所示：

正投影相機(jī)有時(shí)候也叫正交投影攝像機(jī),，下圖顯示了正交攝像機(jī)投影和透視投影之間的差別。

2、 兩者的區(qū)別

正投影和透視投影的區(qū)別是：透視投影有一個(gè)基本點(diǎn)，就是遠(yuǎn)處的物體比近處的物體小,。我們看看著名的蒙娜麗莎的微笑就是典型的透視作品：

觀察上圖,，對(duì),，沒錯(cuò)是鳳姐,，主要不是叫您看它,，是看它后面的樹木,，它是不是越來越小呢,？對(duì)，這就是透視,。

在工程建筑領(lǐng)域,，正投影的例子很多，例如下面就是一個(gè)正投影的例子：

其特點(diǎn)是,，遠(yuǎn)近高低比例都相同。

下面我們來介紹正投影相機(jī),，正投影的構(gòu)造函數(shù)如下所示：

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

結(jié)合下面一個(gè)圖,，我們來看看，各個(gè)參數(shù)的意思,。

介紹參數(shù)之前,，先假定一個(gè)相機(jī)中心點(diǎn)，相機(jī)中心點(diǎn)可以想成是鏡頭的中心點(diǎn),。為了讓大家能更容易的明白,，我還是上一幅圖吧，雖然這樣會(huì)多花我一點(diǎn)時(shí)間,。

圖中紅點(diǎn)就是我們假設(shè)的相機(jī)中心點(diǎn),。下面介紹一下構(gòu)造函數(shù)的參數(shù)：

1、 left參數(shù)

left：左平面距離相機(jī)中心點(diǎn)的垂直距離,。從圖中可以看出,，左平面是屏幕里面的那個(gè)平面。

2,、 right參數(shù)

right：右平面距離相機(jī)中心點(diǎn)的垂直距離,。從圖中可以看出，右平面是屏幕稍微外面一點(diǎn)的那個(gè)平面,。

3,、 top參數(shù)

top：頂平面距離相機(jī)中心點(diǎn)的垂直距離。上圖中的頂平面,，是長(zhǎng)方體頭朝天的平面,。

4、 bottom參數(shù)

bottom：底平面距離相機(jī)中心點(diǎn)的垂直距離,。底平面是頭朝地的平面,。

5、near參數(shù)

near：近平面距離相機(jī)中心點(diǎn)的垂直距離,。近平面是左邊豎著的那個(gè)平面,。

6、far參數(shù)

far：遠(yuǎn)平面距離相機(jī)中心點(diǎn)的垂直距離,。遠(yuǎn)平面是右邊豎著的那個(gè)平面,。

有了這些參數(shù)和相機(jī)中心點(diǎn)，我們這里將相機(jī)的中心點(diǎn)又定義為相機(jī)的位置,。通過這些參數(shù),，我們就能夠在三維空間中唯一的確定上圖的一個(gè)長(zhǎng)方體。這個(gè)長(zhǎng)方體也叫做視景體,。

投影變換的目的就是定義一個(gè)視景體,，使得視景體外多余的部分裁剪掉，最終圖像只是視景體內(nèi)的有關(guān)部分,。

好了,，看一個(gè)簡(jiǎn)單的例子：

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

scene.add( camera );

這個(gè)例子將瀏覽器窗口的寬度和高度作為了視景體的高度和寬度,，相機(jī)正好在窗口的中心點(diǎn)上。這也是我們一般的設(shè)置方法,，基本上為了方便,，我們不會(huì)設(shè)置其他的值。

透視投影是更符合我們視覺的投影,，當(dāng)你凝視一個(gè)女人時(shí)，就是因?yàn)檫h(yuǎn)近高低各不同,，女人才顯得美麗,，叫你看一個(gè)正投影的女人，估計(jì)連胸部都分不清,，那么也沒什么看頭,。

正因?yàn)椋敢曄鄼C(jī)這么有魅力,，所以在各種應(yīng)用中運(yùn)用非常廣泛。

透視投影相機(jī)的構(gòu)造函數(shù)如下所示：

PerspectiveCamera( fov, aspect, near, far )

我們來欣賞一幅圖來看看這個(gè)函數(shù)的各個(gè)參數(shù)的意思：

先來明確這個(gè)圖里涉及的概念,。很多作者都認(rèn)為這些概念很簡(jiǎn)單,，不需要講解，但是其實(shí)正是這些簡(jiǎn)單的東西,，讓很多初學(xué)者不明白,。所以我一直想把這些簡(jiǎn)單的內(nèi)容給講清楚，以至于大家不在這個(gè)上面花費(fèi)過多的時(shí)間,，畢竟多的時(shí)間可以去掙錢,，可以去陪女朋友，去做超級(jí)奶爸,。

1,、視角fov：這個(gè)最難理解,我的理解是,眼睛睜開的角度,即,視角的大小,如果設(shè)置為0,相當(dāng)你閉上眼睛了,所以什么也看不到,如果為180,那么可以認(rèn)為你的視界很廣闊,但是在180度的時(shí)候，往往物體很小,，因?yàn)樗谀愕恼麄€(gè)可視區(qū)域中的比例變小了,。

2、近平面near：這個(gè)呢,，表示你近處的裁面的距離,。補(bǔ)充一下，也可以認(rèn)為是眼睛距離近處的距離,，假設(shè)為10米遠(yuǎn),，請(qǐng)不要設(shè)置為負(fù)值，Three.js就傻了,不知道怎么算了,

3,、遠(yuǎn)平面far：這個(gè)呢,，表示你遠(yuǎn)處的裁面,

4,、縱橫比aspect：實(shí)際窗口的縱橫比，即寬度除以高度,。這個(gè)值越大,，說明你寬度越大，那么你可能看的是寬銀幕電影了,，如果這個(gè)值小于1,，那么可能你看到的是如下的圖中的LED屏幕了。

好了,，看看下面一個(gè)簡(jiǎn)單的例子：

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

scene.add( camera );

這個(gè)例子,，很明了，就不在解釋了,，如有不明白,，那請(qǐng)積極問我QQ吧。

接下來,，結(jié)合上面講的兩種相機(jī)，我們來看一個(gè)實(shí)例,。這個(gè)實(shí)例首先使用正投影相機(jī),，然后在使用透視相機(jī)。先看看正投影相機(jī)的效果：

從圖中可以看出,，它基本上各個(gè)方向大小都相同,，沒有透視的效果。 我們來看看這一段代碼,，你可以從4-1.html下載本實(shí)例,。

明白了正投影的效果，我們現(xiàn)在將相機(jī)變成透視投影,，只要更改上面關(guān)于相機(jī)的代碼,，就可以了，這里我們變成如下的代碼：

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

效果如下:

這是視角為45度的情況,，也就是眼睛睜開45度的情況,。人類的正常視角是120度左右，但是要集中注意力看清楚東西,，那么眼睛的視角在30-40度比較好,。

這里我們分別展示視角設(shè)置為80度，100度,，120度,，160度和179度時(shí)，看到場(chǎng)景的情況：

80度視角效果圖如下:

100度視角效果圖如下:

120度視角效果圖如下:

160度視角效果圖如下:

179度視角效果圖如下:

ok,，我們已經(jīng)將主要的視角大小給搞定了,。反復(fù)對(duì)照上面的圖,，你會(huì)發(fā)現(xiàn)，視角越大,，中間的物體越小,，這是因?yàn)椋暯窃酱?，看到的?chǎng)景越大,，那么中間的物體相對(duì)于整個(gè)場(chǎng)景來說，就越小了,。

你還可以試一試睜大您的眼睛,，努力掙得最大，你發(fā)現(xiàn)周圍的物體看不清了,，這就是眼大不清的原理,，你無法集中注意力，而且你視圖看到你前面的所有物體,，你的焦距無法固定,，所以場(chǎng)景非常模糊。

雖然你也許感覺不了非常明顯,，你前面的某一件物體確實(shí)縮小了,，但在計(jì)算機(jī)固定大小的屏幕上，顯示更多更大的場(chǎng)景,，毫無疑問，每一件物體顯示是縮小了,。

當(dāng)?shù)竭_(dá)179度的時(shí)候,，three.js真的傻了，他已經(jīng)完全不明白你要看什么了,，他已經(jīng)將你要看的場(chǎng)景設(shè)為無窮大了,，所以每一件物體相對(duì)于無窮大來說，基本在屏幕中無法顯示了,。

ok,，講到這里，這基本是整個(gè)網(wǎng)絡(luò)中講得最清楚的關(guān)于攝像機(jī)的教程了,。謝謝,。剛看投票贊揚(yáng)我一下吧,。