文 献 综 述
一、主要内容
随着计算机技术、图形图像技术、网络技术的不断发展，加之计算机硬件、图像采
集设备的不断革新，人们对图像展示的需求也在不断地增长，传统的计算机二维图像展
示效果已经不能满足用户对周边事物的认知，所以三维展示的计算机虚拟现实技术得到
人们的认可。
全景（Panorama）一词源自希腊语，意为”都能看见”
[1]。广义上的三维全景漫游是一种基于真实图像处理的虚拟漫游技术，它使用的图片是通过普通相机采集的，通过计算机的处理从而产生三维效果。相比普通的照片，三维全景图片拥有更宽阔的视野范围，并且可以有很强的立体感，允许用户进行 360#176;观看[2,3]
。从效果上来看，三维建模技术产生的立体感比三维全景更强，但如果想完全还原真实的场景，三维建模相对于三维全景来说制作周期更长，所需存储空间更大，使用范围受到了很大限制，由此三维全景技术越来越多的得到推广和发展。在互联网技术发展的推动下，全景漫游技术得到了快速发展，但传统的全景漫游展示技术大多数还依赖于 Flash、SilverLight 等插件，基于插件的全景漫游存在跨平台性差、依赖性强等弊端，尤其是在移动终端的全景漫游得不到更好的推广和应用[4,5]。2007 年HTML5 草案被 W3C 接纳，在这之后经历了近 8 年的时间，经过 5 次重大的修改，最终于 2014 年 10 月底将该标准规范制定完成，现在大多数的浏览器都已经支持 HTML5[6]。HTML5 拥有更加丰富的标签，尤其是对多媒体元素的支持标签，并且 HTML5 的兼容性更强，不必考虑跨平台的问题，同时 HTML5 具有更高效的服务器推送技术和更短的启动时间。借助 HTML5 的跨平台性、兼容性等技术优势，将 HTML5 技术和全景漫游技术相结合是全景漫游新的解决方案。
与其他的全景方案相比，基于 HTML5 的全景方案具有以下优势：
(1) HTML5 的 Canvas 对象结合 Three.js 库使三维全景漫游脱离了传统数据建模漫游对多媒体播放插件的依赖，使制作出来的全景漫游系统具有更好的兼容性，并且数据量更小、内存占用率更低。
(2) HTML5 运用了 WEBGL 技术借助显卡实现了图像的加速渲染，降低了系统资
源的消耗，提高了全景漫游观看的流畅度。
(3) HTML5 加入多种新功能，结合这些新功能，API 可以给全景漫游增加更多的
浏览效果。
(4) HTML5 技术成为主流的趋势越来越明显，且 HTML5 的标准规范有利于后期
的平台拓展和开发维护。
对 HTML5 同三维全景技术的结合方案研究可以解决传统全景漫游依赖插件、跨平台能力差等问题，在减轻用户浏览负担的同时给用户带来更直观的观赏体验，展示出网络世界的魅力。该方案的研究给全景漫游的实现提供一套新的解决思路，对全景漫游的发展有着重要意义。根据现有全景方案存在的问题，本文的目的是利用 HTML5 结合全景漫游技术设计研发出一套全景漫游系统的制作平台，利用该平台能够迅速制作出一套具有 WEB 展示功能的全景漫游系统，使全景漫游很好的适应移动终端，增强用户体验。
二、主要信息与技术内容
(1)系统需求分析
整个360 度全景漫游系统以某高校两个校区为研究区，考虑到用户对三维视觉不断增长的体验需求以及全景漫游技术的发展现状，确定该系统在功能上的需求主要有：1. 系统在展示两个校区的校园面貌时要保证其真实性、完整性；2. 系统需具备全景、放大、缩小等基本的图形操作功能，提供丰富的用户交互操作，方便用户自由浏览；3. 采用HTML5 技术带来的扩展功能，体现HTML5 技术所提供的新的用户体验（如语音搜索、离线操作、全屏播放等）；4. 系统的开放性便于编程人员进行相关的学习，要保证系统的稳定性和安全性；5. 系统的平台支持性要比较全面，各主流浏览器的支持情况要良好。
（2）系统总体设计
具体来讲，系统需要分为三个模块：导航地图、全景场景和导航菜单。导航地图部分需提供热点地图，方便用户自由浏览，加入HTML5 的语音搜索功能，用户可以快捷地定位具体场景；全景场景部分可以为用户提供全景漫游功能，用户通过鼠标可以对场景进行水平和垂直的环视操作，通过鼠标滚轮，还能进行图像的放大缩小操作；导航菜单中除了提供放大、缩小、全屏、场景切换等常规功能，加入HTML5 的语音支持及CSS3 的照片墙功能，为用户提供一个更加直观的听觉和视觉效果