THREE.JS入門教程(6)創建自己的全景圖實現步驟
編輯：JavaScript基礎知識
譯序
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
.MeshLambertMaterial({
color: 0xffffff,
envMap: cubemap
});
5.小結
就這樣了，實現一個全景圖很酷，尤其是你可以將你自己的地方制作為WebGL全景圖。和往常一樣，我打包了這次教程的源碼
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
.MeshLambertMaterial({
color: 0xffffff,
envMap: cubemap
});
5.小結
就這樣了，實現一個全景圖很酷，尤其是你可以將你自己的地方制作為WebGL全景圖。和往常一樣，我打包了這次教程的源碼
小編推薦
熱門推薦