摘    要随着计算机的飞速发展，三维图形凭借其全面性、立体性的展示优点，正在逐步取代传统的二维图像的展示方式，应用于各行各业。三维全景展示作为一种新型的三维图像展示技术，常被用于现实场景的立体展示，其原理是以某点作为中心，构建周围全方位的场景展示。目前，关于全景展示技术的研究已经已有很多，但仍存在一些亟待解决的问题，很多方面需要提高，比如标准不一、对插件的强依赖性、系统集成性能差、代码开发复杂、内存占用率高等。本研究选择福建省长汀县的典型景点为三维全景展示对象，通过应用以WebGL的Three。js来渲染3D图形，解决了传统全景漫游需要插件的问题；利用HTML5、CSS、JavaScript等网页开发技术实现系统的交互，成功实现了三维全景漫游技术；满足了无需插件、运行速度快以及代码清晰简单等要求，达到了兼容性高、运行便捷等预期的效果。88377

Abstract   In this era of rapid development of computer, two-dimensional graphics is replaced by three-dimensional graphics due to the comprehensive and three-dimensional advantages of three-dimensional graphics,and make it applied in all walks of life 。 Panorama display is a three-dimensional image display technology, often used in the reality of the scene of the three-dimensional display, the principle is to point as a center, all-round display around the scene 。About the research of Panoramic Show technologies is so many, but still exists many problems, including different standards、plugin-dependence、limited platform supporting、code complicated、Occupancy rate of RAM is so high and so on。 This study selected Changting County of Fujian Province as the research object and use Three。js of WebGL to render three-dimensional graphics solve the problem of the plug-in dependencies; use the Web develop technology include HTML5 CSS JavaScript to create System and achieve panorama display successfully; satisfied requirements include no plugin-dependence running、run fast and the code is clear, to achieve a high compatibility, easy to run and other expected results。

关键词：全景图; 漫游; WebGL; HTML5; Three。js 

Keyword: Panoramic Show; WebGL; HTML5; Three。js;

目  录

1 绪论 4

1。1 研究背景与意义 4

1。2 国内外研究现状 5

1。3 论文的内容安排 6

2 关键技术研究 6

2。1 HTML5技术相关介绍 6

2。1。1 Canvas标签 7

2。2 CSS3技术相关介绍 7

2。3 JavaScript技术简介 8

2。4 WebGL基本介绍 8

2。5 Three。js技术研究 8

3 系统需求分析与总体设计 9

3。1 全景展示系统需求分析 9

3。2 总体设计与规划 9

4