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

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

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

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

最新評論