德扑之星有限公司官方网站

WebVR開發框架的技術選型

WebVR 國外叫 Panorama VR⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯，沉浸式VR①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，所以也稱為 360/720VR㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，一般指基于全景照片制作的沉浸的VR體驗㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，相對應的有 Object-VR✵✶✷✸✹✺✻✼❄❅，是指基于三維模型的VR⑰⑱⑲⑳⓪⓿❶❷❸❹❺。WebVR由于是基于H5和網頁㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，所以使用方便ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，兼容性好①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，并且VR的制作成本也比較低㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，因此變得越來越流行✺ϟ☇♤♧♡♢♠♣♥。而對應的基于unity的VR開和展示都需要對應的VR工具㈠㈡㈢㈣㈤㈥㈦，因此成本自然高了不少✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴。

目前WebVR的開發框架也逐漸多了起來之前以Three.js①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯、Aframe等底層框架為主☧☬☸✡♁✙♆。，、＇：∶；，但是難度較大☾☽❄☃，成本較高⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓。后來Facebook推出了React360.js♀☿☼☀☁☂☄，算是大廠開源的較為比較厲害的 WebVR 框架☾☽❄☃，不過隨著 Facebook 對 React360 的支持力度減弱㈠㈡㈢㈣㈤㈥㈦，年久失修❻❼❽❾❿⓫⓬⓭⓮⓯⓰，其他小眾的 WebVR 也漸漸星火燎原⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓。

我們之前通過React360開發了一款在線的VR生成工具❻❼❽❾❿⓫⓬⓭⓮⓯⓰，可視化操作☧☬☸✡♁✙♆。，、＇：∶；，由于React360框架失去維護ⓚⓛⓜⓝⓞⓟⓠⓡⓢ，因此決定將原有基于 React Native 和 React-360 的方案替換掉✵✶✷✸✹✺✻✼❄❅，對此我們調查了市面上流行的幾個全景開源庫⒜⒝⒞⒟⒠⒡⒢⒣⒤，本文將主要介紹我們的技術選型過程和千語 VR 模塊的一些技術細節☾☽❄☃。

基于全景照片的VR框架有哪些☈⊙☉℃℉❅？

目前市面上較好的開源WebVR JS 庫主要有以下三個：Pannellum✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴、Panolens.js 和 Photo Sphere Viewer❣❦❧♡۵，這幾個庫的使用量相比較來說是高一點①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，質量和文檔都算齊全ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ。

Pannellum 官方網址 https://pannellum.org/

Panolens.js 官方網址 https://pchen66.github.io/Panolens

Photo Sphere Viewer 官方網址https://photo-sphere-viewer.js.org/

三大WebVR框架的對比

基于 PannellumⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ、Panolens.js 和 Photo Sphere Viewer 這三個框架⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，我們做了一個簡單的對比ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，方便我們對最終的VR框架選型☧☬☸✡♁✙♆。，、＇：∶；，具體的對比如下ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，

Pannellum

底層Three.js 功能強大 ★★★★ 文檔較差 ★ 維護度差 ★

Panolens.js

底層WebGL 功能一般 ★★★ 文檔一般 ★★ 維護一般 ★★ 且不支持ESM

Photo Sphere Viewer

底層Three.js 功能強大 ★★★★ 文檔豐富 ★★★★ 維護度高 ★★★★ 且支持Typescript

結論

最終⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，在綜合考慮之后⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，最終選擇了 photo-sphere-viewer 作為全景CMS平臺的WebVR模塊方案⒜⒝⒞⒟⒠⒡⒢⒣⒤。

在使用 photo-sphere-viewer 后⒜⒝⒞⒟⒠⒡⒢⒣⒤，雖然有提供標準的標注插件웃유ღ♋♂，但我們選擇了采用 HTML 標簽的方式實現標注⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯，而不采插件默認的圖片形式☈⊙☉℃℉❅，這樣做有兩個個好處ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，一是可以實現動畫效果⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，插件內置的圖片形式沒有辦法播放動畫且無法對圖片進行各種操作ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，而采用 HTML 標簽的形式之后✺ϟ☇♤♧♡♢♠♣♥，就可以采用 CSS 的方式實現動畫效果ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，二是 HTML 可以嵌入各種內容ⓣⓤⓥⓦⓧⓨⓩ，而不止是圖片❣❦❧♡۵，比如視頻☈⊙☉℃℉❅、3D☾☽❄☃、平臺交互等功能✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴。

另外在不同場景切換的功能上面✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴，由于內置的插件并為提供場景切換時刷新標簽的功能⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯，為了解決這個問題㈠㈡㈢㈣㈤㈥㈦，我們選擇了事件監聽的方法：監聽圖片載入事件ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，在圖片載入完成后使用標簽插件的清除功能清除原有標簽并重新遍歷新場景的標簽然后添加到場景中❣❦❧♡۵。

通過多次迭代開發㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，最終實現了功能比較完善⑰⑱⑲⑳⓪⓿❶❷❸❹❺，可以類似貝殼⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓、720云的幾乎所有功能的VR編輯器웃유ღ♋♂，并且基于Drupal的數據存儲⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，可以對接其他任何系統的數據ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，方便擴展ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ。

可視化的后臺編輯