作为一个三维图形库，WebGL可以使现代浏览器用一种标准高效的方式渲染三维场景。渲染通常是指通过计算机程序从模型生成图片的处理过程。如果按照是否使用特定的图形硬件来区分的话，渲染可以分为基于硬件和基于软件两种渲染方式。前者所有的渲染3D部分是由CPU完成，后者则是由GPU实时执行3D图形运算。由于有特定的硬件处理计算，所以基于硬件的渲染比基于软件的操作更加的有效率，但是基于软件的渲染由于摆脱了硬件依赖性而更具有普遍性。

WebGL可以直接读取计算机GPU计算出来的结果，可以跟计算机硬件相结合。这样无论是三维立体的展示效果还是图像的人机交互都可以很流畅的运行。现在WebGL的应用非常的广泛，除了一些三维立体效果的网页外，在大型3D游戏上WebGL也用的非常多。

2。5 Three。js技术研究

Three。js是在浏览器中运行的基于WebGL的第三方库，封装了WebGL的接口，抽象了许多元素对象用于三维图形的构建。Three。js易于上手，可以通过官方的文档进行3D图像的绘制，因此，本次系统的设计主要利用Three。js进行三维图像的绘制。

每一个WebGL三维场景都需要这么几种元素场景、相机、渲染器以及对象。以下是对这些元素的简要介绍：

(1) 场景：在网页中，就是文档模型DOM中的Canvas，Canvas相当于场景的占位符，提供三维场景绘制的环境。可以将三维场景映射到二维平面上。

(2) 渲染器：负责将三维场景投影到二位平面中，在这个过程中，可以添加光源（light）来模拟现实中的自然光。

(3) 相机：即三维模型中人的眼睛，代表着我们将从什么方向看三维模型。在Three。js中包括透视投影和正投影。透视投影与我们显示生活中的观察物体方式一致，距离视点越近的物体投影越大，反之越小。正投影就是不考虑物体与视点的位置，统一大小绘制。论文网

(4) 物体：场景中显示的几何模型，比如正方体、球体等等，在这些物体的基础上，我们才可以构建几何模型。同时还能模拟现实中的物体。

Three。js在一定程度上，降低了学习WebGL的成本，可以快速上手开发，其简单明了的说明可以帮助我们更好的理解如何在网页中建立一个3D模型

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

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

本次设计选择了福建省长汀县的部分典型旅游景点为研究对象，系统使用平台为移动端。如今的网络发展，景点图片的浏览无法满足人们的需求，然而传统的全景展示系统存在过多缺陷，因此本设计将以网页开发的技术构建全景展示技术，其中以WebGL的第三方库Three。js作为图形渲染库，并结合HTML5、CSS3、JavaScript等Web开发技术进行全景展示系统开发。根据目前的三维全景展示技术的发展，本系统主要的需求有以下几个方面：

(1) 保持系统的稳定性，确保场景的真实性。

(2) 场景要尽量清晰，能确认方位。

(3) 能提供系统的主要交互，如放大缩小、全方位移动等等。提供景点信息。

从整个系统来看，该系统必须得是一个稳定可靠的系统，如果系统出现了异常情况需要得到及时的处理，整个系统要做到一定的优化，例如请求减少、加载画面快速等等。

兼容性方面，在移动端，需要兼容现在市场上的iOS、Android 等各种机型，现在的HTML5在移动端完全兼容，所以在移动端除了某些安卓系统的较低版本，其余的皆可以运行。