Photo Sphere Viewer 构建720VR的技术实现（二）

继上一篇《如何基于开源的Photo Sphere Viewer 框架开发360/720全景VR？》介绍了基于Phone Sphere Viewer来实现720VR的开发，本文就整体的架构再做深入的解析。

我们的实现主要是根据Phot Sphere Viewer的源码和官方文档实现，大家也可以参考官网的文档。

https://photo-sphere-viewer.js.org/api/classes/core.viewer

我们整体的720VR架构包括：一个后端编辑器，一个前端播放器，数据存储的CMS系统。

共三个大块，实现了从后端的编辑到前端VR的播放功能。

VR后端编辑器

基于photo sphere viewer构建，可以实现用户自定的一些操作，允许用户创建全景照片。

用户可以上传现有的全景照片或使用相机拍摄全景照片，并通过编辑器将它们转换成符合 Photo Sphere Viewer 要求的格式。编辑器通常包括一些工具，如全景拼接、图像修复等，以确保生成的全景照片能够在播放器中良好地显示。

在开发vr编辑工具中，由于我们的使在typescript项目中使用的Photo Sphere Viewer，因此在渲染以及双向数据绑定方面没有vue框架项目那么的方便，所以我们引入了lit-html库来帮助构建Web组件和程序的模板渲染引擎。它采用了基于标记模板字符串的模板语法，将动态数据和HTML标记无缝结合，实现了高性能的反应式更新。lit-html 的核心理念是将模板和JavaScript代码分开，使得开发者能够更直观地编写模板，同时又能够获得高效的渲染性能。lit-html的语法简单且直观，易于学习，使可以更自由地使用JavaScript和HTML构建现代Web应用程序。它作为Web组件的渲染引擎，为我们提供了一种灵活而高效的方式来创建可维护、可扩展的前端应用。

VR播放器

播放器是用于在网页和手机上展示全景照片的 JavaScript 库，通过将播放器嵌入到网页中，用户可以与全景照片进行交互，例如拖拽、缩放、全屏显示等。

播放器提供了一个交互式的全景浏览体验，并通常支持在不同设备和浏览器上进行流畅的展示。通过将编辑器和播放器的分离允许用户在不同的环境中使用编辑器来准备全景照片，然后使用播放器将其集成到网页中以供观众查看。这样的分层设计提供了更大的灵活性，使用户能够更容易地定制和部署全景照片。

此外，播放器可以实现离线播放，将VR的数据导出成JSON＋图片的格式，就是可以实现独立部署，离线播放的功能，从而不依赖于网络和在线服务器。

VR编辑器组件

后端的编辑器其实是基于组件的，不同的组件可以实现不同的功能，比如嵌入热点、视频、iframe等功能。

我们主要实现很多组件功能，组件主要是场景内和场景外，场景内的可以实现VR的透视角度，场景外的主要是整个页面的弹出，不能实现透视角度，主要的组件包括如下：

1. 场景切换，可以切换下一个场景

2. 场景内热点：热点图片、热点弹出文字

3. 场景内视频：可以将视频嵌入场景内，实现VR融合的效果

4. 场景内容图片：可以将图片贴入场景内，实现VR融合效果

5. 场景内Iframe：通过可以将url嵌入场景内

6. 场景外弹出：弹出一个图片、文字等

7. 场景外Iframe：弹出一个场景外的Iframe页面

CMS部分

我们可以将这些全景图片、配置信息、场景信息都存储到CMS中，图片存储到Drupal的media中，配置信息等等全部存储到Drupal的JSON字段里面，然后前端的Sphere Viewer去读取这些配置信息，进行渲染，后台可以通过Drupal的Media管理，进行图片更新，以及JSON信息的修改，对全景信息进行更新，就可以实现动态的全景VR功能。

具体的CMS存储图片，可以参考这篇文章 CMS如何存储和管理大量图片/海量图片？

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