720VR 又稱之為 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相機。
VR相機
如何拍攝720照片
貝殼看房有一個專門的拍攝裝置，不過本質都是魚眼相機，不過貝殼那個可以自動導入系統，比如客廳、卧室等标記功能。
拍攝720照片一般是使用三腳架+手機遠端控制，手機APP可以點選按鈕觸發拍攝操作，這樣的目的就是讓人不要在相機裡面，不然裡面就有一個拍攝者，會影響對全景的展示。（除非有意留人在照片裡面）
手機控制VR相機拍照
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内容到本地，放到本地的伺服器或者硬碟查閱。
原創不易，轉載請注明出處！
===================
大家好，我是Robbin，來給大家講CMS。
主要講解如何使用開源Drupal + 可視化工具GrapeJS (建構)=> 可視化、子產品化、低代碼的、易上手的CMS平台。
可以快速建構網站、手機站、産品站、線上教育、課程售賣、售後咨詢等平台的工具。
==================