如何基于开源的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如何存储和管理大量图片/海量图片？

整体的架构，可以参考下图