值得指出的是,这个应用将图片做成了贴到球体上的那种。这看上去不错,但是我们现在需要将它贴到一个立方体的内表面上,所以还要处理一下这张图。
3.转化到立方体上
这">
首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 17:42:52
原創
1313 人瀏覽過
翻譯序
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照了一張。我拿到了下面這張圖片:
THREE.JS入門教學(6)建立自己的全景圖實作步驟_基礎知識 
值得指出的是,這個應用程式將圖片做成了貼在球體上的那種。這看起來不錯,但是我們現在需要將它貼到一個立方體的內表面上,所以還要處理一下這張圖。
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全景圖。像往常一樣,我打包了這次教程的源碼
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板