基于HTML5的全景漫游系统制作平台的设计与研究-计算机技术专业论文.docxVIP

独创性声明 本人声明所呈交的学位论文是本人在导师指导下进行的研究工作和取得的研 究成果，除了文中特别加以标注和致谢之处外，论文中不包含其他人已经发表或 撰写过的研究成果，也不包含获得 兰州交通大学 或其他教育机构的学位或证书 而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均已在论文中作 了明确的说明并表示了谢意。 学位论文作者签名： 签字日期： 年 月 日 学位论文版权使用授权书 本学位论文作者完全了解 兰州交通大学 有关保留、使用学位论文的规定。 特授权 兰州交通大学 可以将学位论文的全部或部分内容编入有关数据库进行检 索，并采用影印、缩印或扫描等复制手段保存、汇编以供查阅和借阅。同意学校 向国家有关部门或机构送交论文的复印件和磁盘。 （保密的学位论文在解密后适用本授权说明） 学位论文作者签名： 导师签名： 签字日期： 年 月 日 签字日期： 年 月 日 摘 要 与基于三维建模的漫游系统相比，基于真实图像的全景漫游系统由于采用真实的场 景图片，具有数据量小、开发周期短、场景逼真等优点而在旅游、医疗、军事训练等领 域得到越来越广泛的应用。全景漫游系统制作平台能够将拍摄的全景图像经过一系列的 数学计算进行投影显示，控制实现不同场景间的自主漫游，结合计算机多媒体元素和 GIS 进行展示，真实地还原、定位场景，增强用户的交互性及身临其境的体验感。借助 于全景漫游系统制作平台，普通用户可根据自身行业需求，利用普通照片或全景照片快 速地自主制作其虚拟漫游系统，对全景漫游技术在各行业的推广具有重要的意义。 传统的基于真实场景的三维全景漫游制作平台大都基于插件播放器，如 Flash、 QuickTime 等，存在跨平台能力差、插件依赖性强等问题。HTML5 是浏览器技术发展 的趋势，它使网页设计变得更加集成化，尤其是多媒体元素的展示不再过度依赖于 Flash 和 Silverlight 插件，这样不仅给开发人员带来了极大的便利，而且用户在使用中也不必 下载相关的插件，加载速度得到了改进，同时它可以跨平台跨浏览器使用。 本文通过借鉴相关的开源 HTML5 解决方案，在传统的全景漫游制作平台基础上设 计研发出一套能快速制作全景漫游系统的平台。本文根据全景漫游的需求对系统进行了 设计，主要包括以下四大模块：全景场景模块、地图导航模块、菜单导航模块、终端全 景推送模块。全景场景模块利用开源的 Three.js 库结合 HTML5 的 Canvas 标签实现全景 漫游场景的展示，同时通过 JavaScript 语言对鼠标动作响应实现对场景的角度旋转，视 野放大、缩放等控制；地图导航通过 HTML5 的nav和map标签结合 Javascript、CSS 等技术，实现了地图显示和隐藏控制，同时也可以根据地图导航提供的热点实现场景的 切换；菜单导航可以控制场景的放大缩小、场景切换、全屏观看等效果；终端全景推送 根据用户终端所在位置，利用 HTML5 的定位功能结合 GIS 坐标信息给用户展示出附近 方圆 10 公里的其他全景漫游，用户根据推送的全景漫游链接可自由观看感兴趣的景点。 本文采用的 Three.js 库同 HTML5 最新标签解决了传统漫游需要插件、跨平台能力 差的问题，并引入终端全景推送功能，使全景漫游更加人性化，体现出 HTML5 的优势。 通过在以上设计研发平台上制作漫游系统案例并进行测试表明，该平台达到了设计目 标，制作的系统可以流畅地进行全景漫游并且具有较强的浏览器兼容性。 关键词：虚拟漫游；全景图像；HTML5；GIS 论文类型：应用研究 I - Abstract Compared with the roaming system which is based on three-dimensional (3D) model, the panoramic roaming based on real scene is getting more and more application in areas, such as tourism, medical and military training. That is because it has many advantages, such as small amount of data and short development cycle. Panoramic roaming production platform can display the panorama with a series of mathematical calculations, and it can realize independent roaming between different scenes,