如何基于開源的Photo Sphere Viewer 框架開發360/720全景VR⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯？
720 VR 又稱之為 Web VRⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，是指基于Web/H5等通過全景照片☈⊙☉℃℉❅，快速構建出基于瀏覽器設備快速體驗的VRⓚⓛⓜⓝⓞⓟⓠⓡⓢ，類似現在的貝殼看房功能♀☿☼☀☁☂☄。該VR可以通過 Node.js 就可以開發①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，最初是Facebook就推出了一套免費開源的VR框架⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，叫React 360㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，不過后來Facebook 把這個項目停掉了✺ϟ☇♤♧♡♢♠♣♥，沒有了維護㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，導致我們必須重新選擇一套框架來繼續開發VR⑰⑱⑲⑳⓪⓿❶❷❸❹❺，因此我們對多個VR框架進行了對比和篩選⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。
經過對比♦☜☞☝✍☚☛☟✌✽✾✿❁❃，可以開發VR的主要有下面幾個框架：
1. Photo Sphere Viewer https://photo-sphere-viewer.js.org/
2. KrPano https://krpano.com/
3. Pannellum https://pannellum.org/
KrPano的功能更強大一些☈⊙☉℃℉❅，但是部分要收費①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，所以PhotoSphereViewer來說完全開源ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，并且免費❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣，插件也不少㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，算是比較好的選擇了ⓣⓤⓥⓦⓧⓨⓩ。
本文重點介紹一些基于Photo Sphere Viewer來開發全景VR的流程以及注意事項ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，詳細的框架對比⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，可以參考我們這篇文章：《WebVR開發框架的技術選型和對比》
全景VR基礎知識
在開發全景VR之前㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，有一些基礎的知識需要提前了解一下ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，以便方便開發中的理解和場景應用웃유ღ♋♂。
首先①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，了解什么是全景圖⑰⑱⑲⑳⓪⓿❶❷❸❹❺？
全景圖就是720度圖片①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，跟我們用相機平移照出來的全景是不一樣⑰⑱⑲⑳⓪⓿❶❷❸❹❺，我們相機平移是照出來的360圖片㈠㈡㈢㈣㈤㈥㈦，而我們說的720圖片是包含天地的✵✶✷✸✹✺✻✼❄❅，也就是上下的視角❣❦❧♡۵。
看下面的圖示☾☽❄☃，這里有360和720的原理剖析☈⊙☉℃℉❅，可以參考
360圖片拍照
720圖片拍照
720圖片的拍攝工具
360照片其實可以使用相機旋轉的方式拍攝♦☜☞☝✍☚☛☟✌✽✾✿❁❃，可以手持旋轉☧☬☸✡♁✙♆。，、＇：∶；，也可以拍旋轉拍攝架♀☿☼☀☁☂☄，然后使用我們普通的相機或者手機就可以拍攝⑰⑱⑲⑳⓪⓿❶❷❸❹❺。
720照片通過旋轉也沒法拍攝❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣，因為普通的相機ⓚⓛⓜⓝⓞⓟⓠⓡⓢ、甚至價格高一些相機都無法拍攝全景的角度⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，必須使用專用的拍攝設備웃유ღ♋♂。
這個可以從京東㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉、淘寶等網站直接購買⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，搜索360或者720相機❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣，（因為名稱不統一或者概念不統一的原因⑰⑱⑲⑳⓪⓿❶❷❸❹❺，購物網站大多360相機也是指的720全景相機）⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，比如理光（RICOH） Theta SC2 360 就是一款價格適中的全景720相機❻❼❽❾❿⓫⓬⓭⓮⓯⓰。
如何拍攝720照片
貝殼看房有一個專門的拍攝設備①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，不過本質都是魚眼相機❻❼❽❾❿⓫⓬⓭⓮⓯⓰，不過貝殼那個可以自動導入系統㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，比如客廳㈠㈡㈢㈣㈤㈥㈦、臥室等標記功能⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。
拍攝720照片一般是使用三腳架+手機遠程控制⑰⑱⑲⑳⓪⓿❶❷❸❹❺，手機APP可以點擊按鈕觸發拍攝操作⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，這樣的目的就是讓人不要在相機里面ⓚⓛⓜⓝⓞⓟⓠⓡⓢ，不然里面就有一個拍攝者✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴，會影響對全景的展示⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。（除非有意留人在照片里面）
Photo Sphere Viewer
Photo sphere viewer 是基于three.js和uEvent 2實現的一套全景圖片查看功能♀☿☼☀☁☂☄，再加上Markers插件⑰⑱⑲⑳⓪⓿❶❷❸❹❺，可以給場景里面做一些標記⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，這樣就實現了交互效果☧☬☸✡♁✙♆。，、＇：∶；。此外♦☜☞☝✍☚☛☟✌✽✾✿❁❃，可以將多個場景串聯❣❦❧♡۵，就實現了導航功能ⓣⓤⓥⓦⓧⓨⓩ，可以從外景進入實驗室之類⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾。
如下圖：
整合內容管理系統（CMS）
我們可以將這些全景圖片❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣、配置信息ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ、場景信息都存儲到CMS中❣❦❧♡۵，圖片存儲到Drupal的media中☈⊙☉℃℉❅，配置信息等等全部存儲到Drupal的JSON字段里面✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴，然后前端的Sphere Viewer去讀取這些配置信息✵✶✷✸✹✺✻✼❄❅，進行渲染☧☬☸✡♁✙♆。，、＇：∶；，后臺可以通過Drupal的Media管理⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，進行圖片更新☈⊙☉℃℉❅，以及JSON信息的修改ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，對全景信息進行更新☾☽❄☃，就可以實現動態的全景VR功能☧☬☸✡♁✙♆。，、＇：∶；。
具體的CMS存儲圖片⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，可以參考這篇文章 CMS如何存儲和管理大量圖片/海量圖片⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓？
整體的架構⒜⒝⒞⒟⒠⒡⒢⒣⒤，可以參考下圖
可視化構建VR工具
如果每一次都需要重新開發☧☬☸✡♁✙♆。，、＇：∶；，那么全景VR的開發成本會比較高❣❦❧♡۵，我們基于Sphere Image Viewer 和 CMS管理系統⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯，制作了可視化的后臺管理工具☧☬☸✡♁✙♆。，、＇：∶；，用戶可以在后臺上傳圖片ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ、創建VR♀☿☼☀☁☂☄、添加標記⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ、添加說明㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉、生成VR場景等功能⑰⑱⑲⑳⓪⓿❶❷❸❹❺，實現了所見即所得的VR生成功能⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，對于創建VR場景應用☾☽❄☃，非常快速✵✶✷✸✹✺✻✼❄❅、高效ⓣⓤⓥⓦⓧⓨⓩ。
結論
如果要定制Photo Sphere Viewer✺ϟ☇♤♧♡♢♠♣♥，那么就需要參考Photo Sphere Viewer的詳細文檔ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，以及相關的插件應用ⓚⓛⓜⓝⓞⓟⓠⓡⓢ。
如果要快速實現一個簡單的VR場景⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，可以直接使用我們的VR構建工具ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，生成在線的VR工具ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，也可以導出VR內容到本地☾☽❄☃，放到本地的服務器或者硬盤查閱ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ。
歡迎訪問我們的全景VR工具 全景VR制作工具>>
原創不易❻❼❽❾❿⓫⓬⓭⓮⓯⓰，轉載請注明出處♦☜☞☝✍☚☛☟✌✽✾✿❁❃！
更多資料☈⊙☉℃℉❅，請參考我們之前的文章：
2. 全景沉浸式Web VR制作中如何選擇全景相機 （2023版本）
4. WebVR哪個框架好❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣？WebVR開發框架的技術選型㈠㈡㈢㈣㈤㈥㈦，360VR技術框架♦☜☞☝✍☚☛☟✌✽✾✿❁❃。
6. CMS如何存儲和管理大量圖片/海量圖片❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣？
8. 如何建設圖書館多媒體電子資源庫⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯？
