THREE.JS入門教學(6)建立自己的全景圖實作步驟_基礎知識

翻譯序
Three.js是一個很棒的開源WebGL函式庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現真正意義的3D。但目前這項技術還在發展階段，資料極為匱乏，愛好者學習基本上要透過Demo源碼和Three.js本身的源碼來學習。
0.簡介
全景圖非常酷。使用Three.js做一個屬於自己的全景圖並不是那麼困難。
要做一個全景圖，你需要一個軟體用來做一張全景圖片（譯者註：如果你沒有那些特殊的設備）。我使用了iPhone上的Microsoft Photosynth軟體來製作。
1.環境紋理
首先什麼是環境紋理？在WebGL或OpenGL中他們實際上是一種特殊的立方體紋理。一個立方體紋理是對整個場景（虛擬的或現實的）的觀察，場景的樣子被「貼」在了立方體的內部表面。想像一下，你站在山頂，向前看，向左看，向右看，向上看，向下看，最後向後看。每次你都看到了這個「立方體」的內部表面，你就站在這個立方體的中心。如果這個立方體夠大，就很難分辨出立方體的稜和角，而給你一種錯覺：你處在一個很大的環境裡面。如果你還沒弄清楚，那麼維基百科上的cube maps條目會非常有幫助。
這很酷，但這怎麼用？我們可以像做反射和折射一樣，而且事實上這兩者的函數都已經內建在GLSL，WebGL的著色器語言上了。你只需要傳遞給著色器6張紋理圖片，每張代表立方體的一個內表面，然後告訴WebGL這是個立方體紋理，然後就可以使用上面的效果了。
半軸：這個術語服務於立方體紋理。因為我們通常使用三個軸來描述三維空間：x軸、y軸、z軸，所以用於立方體紋理的圖片也用軸的名稱來標識了。總共六張圖片，每個軸兩張圖片，正半軸一個，負半軸一個。
2.創建全景圖片
創建全景圖片的第一步就是走出戶外，使用手機上的應用來照一張。我在倫敦的金融區轉了一圈，然後在Gherkin照了一張。我拿到了下面這張圖片：
 
值得指出的是，這個應用程式將圖片做成了貼在球體上的那種。這看起來不錯，但是我們現在需要將它貼到一個立方體的內表面上，所以還要處理一下這張圖。
3.轉化到立方體上
這部分我很簡短。我把剛才獲得的那張照片載入到一個3D建模軟體中，例如Maya或Blender，然後將其貼到一個球體的內表面上。然後我創建了6個正射投影的相機，每個相機都對應於一個半軸。最後我將這6個相機捕捉到的影像保存了下來。具體怎麼完成比較複雜，也沒必要在這裡講解，所以我寫了一個Blender腳本文件，所有的一切都設定好了。

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

複製程式碼 程式碼如下:

/紋理影像的url
var urls = [
'path/to/pos-x.png',
'path/to/neg-x.png',
'path/to/pos -y.png',
'path/to/neg-y.png',
'path/to/pos-z.png',
'path/to/neg-z.png'
],
// 打包成我們需要的物件
cubemap = THREE.ImageUtils.
loadTextureCube(urls);
// 設定格式為RGB
cubemap.format = THREE. .RGBFormat;

現在只需要將cubemap指定到一個材質中去就可以了！

複製程式碼 程式碼如下:

var material = new THREE color: 0xffffff,
envMap: cubemap
});


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