譯序
Three.js是一個(gè)偉大的開(kāi)源WebGL庫(kù)，WebGL允許JavaScript操作GPU，在瀏覽器端實(shí)現(xiàn)真正意義的3D。但是目前這項(xiàng)技術(shù)還處在發(fā)展階段，資料極為匱乏，愛(ài)好者學(xué)習(xí)基本要通過(guò)Demo源碼和Three.js本身的源碼來(lái)學(xué)習(xí)。
0.簡(jiǎn)介
全景圖非?？帷Ｊ褂肨hree.js做一個(gè)屬于自己的全景圖并不是那么困難。
要做一個(gè)全景圖，你需要一個(gè)軟件用來(lái)做一張全景圖片（譯者注：如果你沒(méi)有那些特殊的設(shè)備）。我使用了iPhone上的Microsoft Photosynth軟件來(lái)制作。
1.環(huán)境紋理
首先什么是環(huán)境紋理？在WebGL或者OpenGL中他們實(shí)際上是種特殊的立方體紋理。一個(gè)立方體紋理是對(duì)整個(gè)場(chǎng)景（虛擬的或現(xiàn)實(shí)的）的觀察，場(chǎng)景的樣子被“貼”在了立方體的內(nèi)部表面。想象一下，你站在山頂，向前看，向左看，向右看，向上看，向下看，最后向后看。每一次你都看到了這個(gè)“立方體”的內(nèi)部表面，你就站在這個(gè)立方體的中心。如果這個(gè)立方體足夠大，就很難分辨出立方體的棱和角，而給你一種錯(cuò)覺(jué)：你處在一個(gè)很大的環(huán)境里面。如果你還沒(méi)弄明白，那么維基百科上的cube maps條目會(huì)非常有幫助。
這很酷，但是這怎么用？我們可以像做反射和折射一樣，而且事實(shí)上這兩者的函數(shù)都已經(jīng)內(nèi)建在GLSL，WebGL的著色器語(yǔ)言上了。你只需要傳遞給著色器6張紋理圖片，每張代表立方體的一個(gè)內(nèi)表面，然后告訴WebGL這是個(gè)立方體紋理，然后就可以使用上面的效果了。
半軸：這個(gè)術(shù)語(yǔ)服務(wù)于立方體紋理。因?yàn)槲覀兺ǔＪ褂萌齻€(gè)軸來(lái)描述三維空間：x軸、y軸、z軸，所以用于立方體紋理的圖片也用軸的名稱(chēng)來(lái)標(biāo)識(shí)了。一共六張圖片，每個(gè)軸兩張圖片，正半軸一個(gè)，負(fù)半軸一個(gè)。
2.創(chuàng)建全景圖片
創(chuàng)建全景圖片的第一步就是走出戶(hù)外，使用手機(jī)上的應(yīng)用來(lái)照一張。我在倫敦的金融區(qū)轉(zhuǎn)了一圈，然后在Gherkin照了一張。我獲得了下面這張圖片：
 
值得指出的是，這個(gè)應(yīng)用將圖片做成了貼到球體上的那種。這看上去不錯(cuò)，但是我們現(xiàn)在需要將它貼到一個(gè)立方體的內(nèi)表面上，所以還要處理一下這張圖。
3.轉(zhuǎn)化到立方體上
這部分我簡(jiǎn)短介紹一下。我把剛才獲得的那張照片載入到一個(gè)3D建模軟件中，比如Maya或者Blender，然后將其粘貼到一個(gè)球體的內(nèi)表面上。然后我創(chuàng)建了6個(gè)正射投影的相機(jī)，每一個(gè)都對(duì)應(yīng)于一個(gè)半軸。最后我將這6個(gè)相機(jī)捕捉到的圖像保存了下來(lái)。具體怎么完成比較復(fù)雜，也沒(méi)必要在這里講解，所以我寫(xiě)了一個(gè)Blender腳本文件，所有的一切都設(shè)置好了。

使用這個(gè)腳本文件你只需要：
1.將你自己的全景圖重命名為 environment.jpg；
2.將全景圖和Blender腳本文件放在同一個(gè)文件夾下；
3.載入腳本文件；
4.點(diǎn)擊右側(cè)的 Animation 按鈕；
5.等一會(huì)兒，6張圖像已經(jīng)創(chuàng)建好了。
很Cool吧？現(xiàn)在你可以重新命名這些圖像，使之與每一個(gè)半軸相匹配。比如這樣：
•0001.png → pos-z.png
•0002.png → neg-x.png
•0003.png → neg-z.png
•0004.png → pos-x.png
•0005.png → neg-y.png
•0006.png → pos-y.png
4.加入場(chǎng)景
現(xiàn)在我們已經(jīng)獲得了環(huán)境紋理，然后將其載入到場(chǎng)景中。Three.js使這變得非常簡(jiǎn)單：

現(xiàn)在只需要將cubemap指定到一個(gè)材質(zhì)中去就可以了！

5.小結(jié)
就這樣了，實(shí)現(xiàn)一個(gè)全景圖很酷，尤其是你可以將你自己的地方制作為WebGL全景圖。和往常一樣，我打包了這次教程的源碼

最新評(píng)論