1. 研究目的与意义（文献综述包含参考文献）

文 献 综 述
一、主要内容
随着计算机技术、图形图像技术、网络技术的不断发展，加之计算机硬件、图像采
集设备的不断革新，人们对图像展示的需求也在不断地增长，传统的计算机二维图像展
示效果已经不能满足用户对周边事物的认知，所以三维展示的计算机虚拟现实技术得到
人们的认可。
全景（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 的照片墙功能，为用户提供一个更加直观的听觉和视觉效果

2. 研究的基本内容、问题解决措施及方案

根据总体设计中的模板设计，模板具有四个模块：全景场景模块，地图导航模块，菜单导航模块，终端全景推送模块。根据系统设计的原则，良好的系统模块间应具有较小的耦合性，本文对各模块进行了独立设计。
1．全景场景模块
全景场景模块可以分为场景的展示和漫游的控制，展示是指如何将全景图像在浏览器中进行显示，控制是指如何实现相应用户在浏览全景漫游时触发的动作（如：鼠标点击、鼠标拖动、滚轴滚动）。
1.1 场景展示
场景展示部分主要是通过 html5 的 canvas 标签和基于 webgl 技术three.js 库来完成。canvas 标签是 html5 中新加入的标签成员，它本身不具有绘画功能，要完成绘画需要借助 javascript 来实现，本项目利用的就是 three.js 库所提供的功能来实现图像的展示效果。
canvas 是 html5 中新加入的标签成员，它就像一个画板，但不能进行图像绘制。javascript 可以绘制图像，此时 javascript 相当于画笔，在 canvas 画板上进行绘制。canvas的图像管理方法有多种，它可以绘制各种形状（矩形、圆形等）和路径，也可以对网页动画和交互进行管理。
物体的添加（initobject()）
物体的添加主要包括几何形状的设置和纹理的添加，three.js 中可以处理的物体的几何形状包括球体（sphere）、平面（plane）、立方体（cube）、圆柱体（cylinder）。纹理就是指几何图形表面覆盖的颜色或图像，本文采用的是立方体处理方式将全景图片作为纹理贴在立方体的表面，代码如下：
function initobject()
{
cube = new three.mesh(
new three.cubegeometry(50,50,50),
new three.meshlambertmaterial({ color: 0xff0000})
);
scene.add(cube);
cube.position.set(0,0,0);
}
执行绘制（threestart()）
最后，按照已设定的相机来观察场景中的物体的方式来进行实际绘制。
function threestart()
{
initthree();
initcamera();
initscene();
initlight();
initobject();
renderer.clear();
renderer.render(scene, camera);
}
1.2 漫游控制
漫游控制是指用户通过计算机鼠标或者智能终端的触摸操作来控制漫游系统的播放（如：拖动、点击、滚轴滚动、滑动等动作），对这些用户动作绑定相应的方法进行处理。本文根据 three.js 库提供的函数所写的计算机鼠标和智能终端事件的处理方法有 6个：鼠标按下事件的处理方法 onqjmousedown()，鼠标移动事件的处理方法onqjmousemove()，鼠标按下后被释放弹起事件的处理方法 onqjmouseup()，鼠标滚轮转 动 事 件 的 处 理 方 法 onqjmousewheel() ， 智 能 终 端 屏 幕 触 摸 事 件 处 理 方 法
onqjtouchstart()和智能终端屏幕拖动事件处理方法 onqjtouchmove()
1.3语音解说
语音解说功能可以让用户了解更多有关系统的内容，该功能是通过html5特有的标签lt;embedgt; 来实现的，相关的程序代码为：lt;embed id="music" act="1"
src="music/music.mp3" autostart="true"loop="true" hidden="true"gt;lt;/embedgt; 用户可以通过对音频图标的点击实现音频的播放、暂停控制。

[1] 郭长青,曹芳.三维全景技术在旅游景区介绍中的应用.地理空间信息,2009,7(1):46-48.
[2] 冯建平,吴丽华.基于全景图像的三维全景漫游系统的构建.计算机与数字工程,2013,41(1):115-11
7.
[3] 武刚,余武.虚拟校园三维全景漫游系统探究与实现.现代教育技术,2013,23(5):122-126.
[4] 熊紫瑾.基于 html5 的 web 离线应用的设计与研究.信息系统工程,2015(1):144.
[5] 邓晓,何中灵.浅析 html5 与 flash 的发展趋势.电子制作,2014(24):47.
[6] 刘华星,杨庚.html5#8212;#8212;下一代 web 开发标准研究.计算机技术与发展,2011,21(8):54-58.