打造H5裏的「3D全景漫遊」祕籍

近來風生水起的VR虛擬現實技術，抽空想起年初完成的「星球計劃」項目，總結篇文章與各位分享一下製做基於Html5的3D全景漫遊祕籍。

 

QQ物聯與深圳市天文臺合做，在手Q「發現新設備」-「公共設備」裏，鏈接QQ物聯攝像頭爲用戶提供2016年天體大事件的直播，你們能夠經過手Q實時觀看到世界各地最佳觀測點的日食，流星等天體現象。承載整個「星球計劃」活動的運營頁面，經多方討論，咱們決定嘗試3D全景漫遊模式的H5運營頁進行推廣，今天就不詳述活動的具體內容，先和你們聊一聊這H5裏「3D全景漫遊」的製做方法。

先貼一個體驗地址（請忽略GIF錄屏的卡頓及字體，iOS開啓陀螺儀體驗最佳），Page3的宇宙部分-轉動手機在模擬的宇宙裏搜尋各大行星，就是咱們今天要說的基於Html5的3D全景漫遊。

   

 

要製做全景漫遊，首先得有全景圖像。全景圖像的獲取一般是藉助魚眼的全景攝像機的拍攝來完成的，或者是單反相機、魚眼鏡頭、雲臺和三角架的組合。須要按照一個方向旋轉360度拍攝一組照片，照片之間要有部分重合的部分，方便進行後期的拼接和融合。在拍好照片後須要將它們無縫拼接在一塊兒，生成的全景圖像可分爲球面全景圖、立方體全景圖以及柱狀全景圖等。（咋們騰訊地圖的街景體驗，就是最多見的全景漫遊技術啦）

沒有全景攝像機，也能夠經過一些素材站點拿到適合咱們項目的全景圖。例如：某素材站點

固然，星球計劃的背景圖是宇宙星際，相對而言是無序的，因此靠視覺設計師進行拼接繪製也是能夠的。

而什麼是全景漫遊呢，全景漫遊技術可讓體驗者在全景圖像構建的全景空間裏切換視角的瀏覽。它是經過拍攝全景圖像，再採用計算機圖形圖像技術構建出全景空間，讓使用者能用控制瀏覽的方向，或左或右、或上或下觀看物體或場景，彷彿身臨其境通常。與傳統的3D建模相比，全景漫遊技術製做簡單，數據量小，系統消耗低，且更有真實感。故近年來，也是VR技術的一大熱門實現手法，用前面的貼圖例子來個demo。而在移動端的全景漫遊，更是能夠綁定陀螺儀，讓你更有身臨其境的感受。

 

在項目初期，預研了一些全景漫遊製做方案，包括目前最爲經常使用的全景漫遊製做工具是Pano2vr & Krpano，以及用Flash，QuickTime，基於Java，js等其餘方式製做全景漫遊，但據預研所瞭解的個方案優劣勢對比圖以下圖，結合「星球計劃」項目的具體狀況，最終優先選擇了Threejs的實現方案。

這裏順便和你們聊聊目前最爲經常使用的全景漫遊製做工具是Pano2vr & Krpano。

（1）Pano2vr操做簡單功能雖少但很是實用，「導入全景圖-設置交互熱點-微調-導出」便可直接生產flash,html5,Quicktime等格式。

Pano2vr對於僅用在PC，iOS上的需求很是合適快捷，但對Android機的支持表現不佳。

（2）Krpano，功能強大完善，各平臺兼容性高，拓展性很強，各種VR場景特效均可承載。但自成體系，須要遵循Krpano xml的這套編程語言，沒有gui的軟件界面，新手上手及後期維護成本較大，生成的全景漫遊專業但對載入速度，內存佔用都有影響。但對於想作高階的，個性化，定製化全景漫遊項目，Krpano是不二選擇。

但這2個工具都須要購買受權碼纔可商用，非免費。

（3）Three.js源自Github的一個開源項目，https://github.com/mrdoob/three.js，官網：http://threejs.org/ 。

看到一個同行的解釋，說理解成Three + js就能夠了。Three表示3D的意思，js表示javascript的意思，故three.js就是使用javascript來寫3D程序的意思，格外的直白清晰啊。依靠javascript的語言編寫，天然給這個方案帶來了高拓展，高兼容，低開發成本，可高性能且免費的幾大優點。

（4）Flash，QuickTime，基於Java，js等其餘方式這裏就不一一詳述，大體的優劣勢對比請參考上面的表格（具體評分僅供參考，軟件版本更新也許會有各方面的升級）。

 

想要利用Three.js製做一個物體渲染到網頁中去，須要構建這3個組建：場景（scene）、相機（camera）和渲染器（renderer）：

（1）場景（scene）

便是畫布，是全部物體object的容器。在最開始的時候對場景實例化，將以後構建的物體都添加到場景中便可。

（2）相機（camera）

用戶是經過相機Camare來查看在scene下的3d場景，在three.js裏包含了正交投影照相機（Orthographic Camera）和透視投影照相機（Perspective Camera）2種，從模擬人眼看物體的方式來選，透視投影照相機更適合。以下圖所示，fov是相機視角的夾角，aspect等於相機畫幅比例，near和far分別是照相機到視景體最近、最遠的距離，均爲正值，且far應大於near。

（3）渲染器（renderer）

渲染器是用來設定渲染的結果會在頁面的什麼元素上面呈現，以及按什麼規則來渲染。

在Three.js中，場景是容器，把咱們星球計劃的星星們放置在構建的3D場景中的不一樣位置；相機對着下場景拍攝，拍攝結果經過渲染器實時的繪製在咱們的瀏覽器上。

（4）構建宇宙並置入場景中

定義了這三大元素以後，下一步，就是構建咱們的星球計劃所需的宇宙了。前文有提到，全景圖像可分爲球面全景圖、立方體全景圖以及柱狀全景圖。

雖然球面全景圖具備和人眼最接近的構建模式，但須要不少個立面才能夠構建成一個球體，球面的經緯度座標沒法展開成一個平面貼圖，相對於其餘方案，性能消耗太高，拼接方法過於繁瑣；而柱形全景圖的垂直視野小，很差作頂部底部的俯仰視角。咱們選定了最多見的立方圖全景圖來構建咱們的3D場景。

立方體全景圖有6個面，咱們須要定義每一個面貼圖的背景圖片，3D位置，旋轉角度（默認的6個面都是朝着咱們的，咱們須要定義朝座標軸的各個方向作90度的旋轉，才能夠搭建成一個立方體）。

而後添加到THREE.Object3D 的數組中，這樣咱們就在場景中構建好了一個3D的宇宙空間。

這裏，考慮到星空背景主要爲了氛圍烘托，咱們將6個面的貼圖減小成2個，以此縮減了資源文件的大小，以下圖所示。

（5）渲染

這裏咱們用的是Threejs的 實時渲染：就是須要不停的對畫面進行渲染，即便畫面中什麼也沒有改變，也須要從新渲染。其中一個重要的函數是requestAnimationFrame，這個函數就是讓瀏覽器去執行一次參數中的函數，這樣經過上面animate中調用requestAnimationFrame()函數，requestAnimationFrame()函數又讓animate()再執行一次，就造成了咱們一般所說的渲染循環 了。

經過上面這些步驟，咱們就構建好這個3D的宇宙空間了。

（6）構建星球放置在宇宙中

一期的星球計劃中，須要增長8顆星球，爲了不畫面過於擁擠，星球們被分散定位在了6個面上。以前咱們定義宇宙六個面的時候給了每一個面一個固定的section id，經過簡單的js 咱們能夠往平面中加入星球的DOM結構。

所以也能夠很輕鬆的利用CSS給這些星球定位及增長個性的動畫效果，這裏要特別注意，不要增長陰影等耗內存特別大的動畫效果，它們是Crash罪魁禍首。

‘

（7）綁定陀螺儀

最後一步，將全景漫遊綁定陀螺儀，這裏涉及到須要對陀螺儀事件作個保護代碼，判斷機器是否支持陀螺儀。完成以上幾步，既能夠實現一個在移動端的全景漫遊啦。

（8）其餘

在項目完成的初期，對部分安卓機的內存消耗仍是過大，爲此在完成項目以後繼續嘗試了一些優化工做，包括 縮減宇宙的尺寸，合併全景貼圖，禁用陀螺儀，預加載和懶加載，星球CSS3動畫縮減，資源文件深度壓縮等工做，但仍是沒法避免在內存不足的安卓機下存在Crash的風險，爲保證項目的穩定上線，退而求其次對安卓機作了兼容版的體驗，預期在後續的項目迭代中再優化頁面在安卓下的表現，實現全平臺的體驗統一。

最後，僅以此文總結在移動端構建3D全景漫遊的試水總結，該嘗試基本上可以知足項目的需求，但在性能優化，細節完善上還繼續打磨，但願能對有興趣的小夥伴帶來一些幫助^^。