古建筑文物三维全景展示的设计与实现.docVIP

古建筑文物三维全景展示的设计与实现 　　摘 要： 针对当前虚拟古建筑文物缺乏灵活性、不能实时更新内容和资源重复建设等问题，提出了一种改进的Web 3D技术来虚拟古建筑物文物。首先阐述了虚拟古建筑文物存在的问题，然后介绍了所涉及到的关键技术，接着对古建筑文物三维全景展示进行设计，最后对其实现。实验结果表明，采用改进的Web 3D技术所虚拟的古建筑文物三维全景达到了预期目标。 　　关键词： Web 3D技术；古建筑文物；虚拟技术；全景展示 　　现有的一般古建筑文物展示主要是应用动态网页、Flash技术、流媒体技术等来实现，在真实性环境的营造、三维立体的交互展示与模拟实验操作上还存在许多不足，如缺乏灵活性、不能实时更新内容和资源重复建设等。近年来，随着互联网的高速发展，涌现了大量以互联网为基础的虚拟现实技术，Web 3D技术基于Internet，依靠软件技术来实现从本机三维图形技术向互联网扩展，具有网络性、三维性和交互性等特征，且提供了具有很好表现力的虚拟现实网络解决方案。它作为一种新型的网络三维图形技术，在立体空间三维模型的展示、虚拟空间及场景的营造、实体交互性等方面有着独特的技术特色与优势，并广泛应用于教学、地理学、考古学、建筑学、医学等领域[1]。因此本文通过引入改进的Web 3D技术来有效地解决目前虚拟古建筑文物中存在的问题。 关键技术简介 　　本古建筑文物三维全景展示主要采用了WebGLamp;Three.js技术，并有效整合HTML5、JSON、Ajax、JSP、SSH（Strust+Spring+Hibernate）等技术来实现。 　　1.1 WebGL技术 　　WebGL是一套跨平台、开源免费的底层三维图形JavaScript API，它允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化[2]。目前已出现很多第三方的WebGL中间件（Three.js、SceneJS、Processing.js等），进而减轻了三维网络应用的开发负担，本文使用Three.js开源3D库来创建和渲染古建筑文物的3D场景。 　　1.2 HTML5 　　HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段。广义上，HTML5实际是指包括HTML、CSS和JavaScript在内的一套技术组合，目的在于减少浏览器对插件的依赖性和丰富网页的表现形式[3]。Canvas元素是HTML5中新增的页面元素，该元素是一个图形绘制容器，拥有一个基于JavaScript的API，可由脚本动态绘制图像，本文使用的就是HTML5中的Canvas元素。 　　1.3 JSON 　　JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式，它是基于JavaScript（Standard ECMA-262 3rd Edition-December 1999）的一个子集。JSON采用完全独立于语言的文本格式，但也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）[4]。这些特性使JSON成为理想的数据交换语言，而且易于人阅读和编写，同时也易于机器解析和生成，因此本古建筑文物的3D场景切换采用JOSN格式与服务器交互。 三维全景展示的设计 　　2.1 策略设计 　　为了满足用户通过浏览器可以全面欣赏古建筑文物的需求，因此为每一个古建筑文物设置了一个或几个观察点，让用户可以在所设计的3D古建筑文物周围任意切换位置，并且可以随意缩放和移动视觉，以便更好地观察欣赏古建筑文物，让用户真正体验到身临其境的感觉，进而实现对古建筑文物的保护和传播。为了达到此目标，本文通过观察点与观察点之间的角度参数来表示切换的位置（即A点相对B点偏离的角度），并且为每一个古建筑文物设置一个入口观察点，当用户点击某个古建筑文物时首先进入该入口观察点，通过入口观察点使用鼠标或者方向键可以向其他任何位置进行移动，进而使用户更全面欣赏此古建筑文物。 　　2.2 总体设计 　　本三维全景展示采用Three.js来创建和渲染古建筑文物的3D场景，为了有效使用3D引擎，本文对其进一步封装成myPanorama.js，它负责古建筑文物3D全景的所有功能，包括初始化3D场景、场景的自动旋转与暂停、视角的缩放和移动、场景的切换以及场景的全屏显示等功能。在需要3D全景展示的页面引入这个myPanorama.j