雖說近來勢頭被AI蓋過了，但VR、AR技術自前年以來，一直在風口浪尖。HTC、SONY的VR眼鏡，微軟的HoloLens、蘋果的ARkit，甚至連任天堂的五毛錢特效AR游戲Pokémon Go都借機火了一把。作為號稱“走在宇宙前沿，五個月換一個新框架”的web前端開發，怎么能錯過這波車呢？

●●●

從WebGL說起

要在web頁面實現VR或者AR場景，離不開3D模型的構建，這就不得不提到WebGL。WebGL，全稱WebGraphics Library，是一套用于在任何兼容的Web瀏覽器中呈現交互式3D和2D圖形，而無需使用插件的JavaScriptAPI。它被整合在瀏覽器中，利用GPU加速和圖像處理，直接在canvas元素上進行渲染，可以無縫地與其他頁面元素整合在一起。

WebGL的接口很多，但是使用起來并不方便，缺乏有效的3D對象操作方法。為此，threeJS應運而生。得益于WebGL的不斷進化，threeJS在此基礎上構建了一個跨瀏覽器的3D動畫引擎，支持場景、相機、光照、材質、網格、粒子系統、物理引擎等特性。此外還提供眾多開源庫，支持添加設備方向檢測，自定義控制器，立體眼鏡支持，分屏渲染一系列功能。因此，本次移動端的360全景漫游就是利用threeJS+設備方向檢測制作而成。

?

●●●

移動端360全景漫游原理

360全景漫游的原理并不復雜，主要分為兩部分：

1、360全景的構建；

2、攝像機視口的控制。

為了節省資源，360全景的構建通常用貼圖完成，將場景的全景圖制作成map圖片，映射到一個封閉的幾何體內表面。常用的貼圖映射方法主要有立方體，球面，以及柱面圖。立方體映射是將全景圖制作為6張正方形貼圖，分別貼到正方體的六個內表面。球面和柱面則是制作場景的球面或者柱面展開圖，映射到球體或柱體的內表面。至于攝像機視口的控制，則可以直接調用threeJS的設備方向檢測開源庫，利用內置傳感器，實現攝像機視口與移動終端屏幕的同步。即攝像機視口跟隨著屏幕朝向一起運動。

位于柏林的索尼中心內景360球面展開

立方展開示意圖?

?

●●●

渲染器的選擇

threeJS利用渲染器進行渲染。在移動端實現3D場景，或者360全景漫游，最關心的應該是響應性能和加載速度。移動設備的處理能力和網絡速度通常較弱，如果響應速度太差或者需要加載大量資源，那么在移動端實現3D場景就失去意義了。因此，渲染器的選擇格外重要。threeJS提供三種渲染器：webglrender，canvasrender和css3drender。webglrender使用WebGL的api，直接在canvas渲染場景，功能強大，可以利用GPU硬件加速。canvasrender不使用webgl，直接在canvas上面渲染場景，速度較慢，適用于一些不支持webgl的設備。而css3drender直接使用html元素，通過css3的transformmatrix3d屬性，操作html元素來旋轉、移動3D對象。

乍一看，似乎css3drender是最適合移動端開發的渲染器，它不需要WebGL，僅僅利用css3的transform，性能和兼容性應該都較優。但事實上并非如此。css3drender用html元素模擬3d對象，意味著每一個3d對象都是一個html元素。當元素移動時，該元素的css都會重置，操作大量元素時渲染成本很高。而且元素采用transformmatrix3d定位，計算誤差較大，某些時候會出現元素重疊和錯位。

而之前覺得WebGL需要GUP加速，可能在低端手機上表現不好，實際上卻是多慮了。WebGL將全部3D對象都渲染到一個canvas上，頁面負擔較小。目前現在市面上的大部分移動端瀏覽器都是chrome內核，對WebGL支持度很高，而且智能移動設備大多配備了GPU，很少出現硬件不支持的情況。

所以在移動端構建3D場景，使用webglrender更合適。

●●●

用戶交互的實現

移動端的交互方式通常有兩種：一種是構建全景場景，利用加速度計，讓用戶在場景中漫游。一種是在固定場景中展示某個3D物體，用戶通過觸摸屏與3D物體互動。全景漫游的方式很簡單，只要引入設備方向檢測插件就可以。比較難處理的是與場景物體的互動。

如果是使用webglrender渲染的3D物體，那么只能把這個物體做成網格模型，通過射線交叉的方式獲取當前用戶點擊坐標對應的物體。這樣做比較麻煩，需要自己定義點擊事件、拖動事件，并有可能因為網格格式導致物體無法與射線交叉。網格模型的數據量通常很大，一個很小的標簽模型往往就是幾百KB大小。所以，除非需要與場景物體做復雜的交互，否則不要采用webglrender直接渲染。

移動端3D場景中最常見的交互方式是點擊。用戶點擊一個物品，一個區域，然后場景進行下一步操作，比如彈窗，鏡頭切換之類的。這種交互用WebGL處理性價比會很低，比較好的做法是把可點擊元素直接做成html元素，由css3drender直接渲染到場景中。因此我們還可以像普通的html節點一樣處理這些元素，綁定各種touch事件，加入各種css效果，并省去引入網格模型的開銷，大大提高了開發效率。

?

一個標簽網格模型需要107 KB，而PNG圖片僅僅2KB

●●●

提高加載速度和兼容性檢測

在移動端制作3D場景，加載速度也是一個重要關注點。

threejs庫文件本身壓縮后有500k左右，制作一個分辨率過得去的全景漫游通常需要六張1024px*1024px的jpg圖片，大小在1.5M~2M之間，此外還有3D網格模型，每個模型都會在400K以上。所以帶有threejs場景的移動端頁面直接加載會特別慢，若把threejs放在head引入，還會導致頁面失去響應，亟需優化。

目前采取的做法是：

• 把threejs庫動態載入，并在onload后再構建場景；

• 先給用戶一個普通頁面，等用戶進入站點后，再偷偷threejs需要的材質、貼圖；

• 貼圖加載完成后立刻渲染場景，不要等待用戶進入3D頁面后再渲染，防止首次渲染過慢導致的空白屏。

除此之外，還要考慮某些瀏覽器不支持threejs的情況。開發文檔上建議使用封裝好的detector.js檢查兼容性，然而實際上這個庫并不準確，而且也無法檢測內存耗盡導致的錯誤。因此最好還是結合try...catch...來使用，在可能出現不支持的位置捕獲錯誤，彈出錯誤提示，爭取給低版本瀏覽器較好的體驗。

●●●?

結語

在移動端引入3D場景，制作全景漫游、VR效果并不困難。數據量、兼容性和運行性能也在可以接受的范圍內。對于某些需要3D展示的站點，這或許是一個值得一試的方案。

所以，最后的最后，附上一個小demo ~~~

?

網易云信 IM 紅包上線啦！最快3小時集成紅包功能

總結

以上是生活随笔為你收集整理的666！让移动端也用上3D·VR特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。