基于Web的虚拟校园展示系统的设计与实现

靳延安

湖北经济学院，湖北武汉 430205

0 引言

近年来，高校之间的生源竞争局面愈演愈烈，部分高校将甚至面临关门危险。在这种生源竞争激烈的大环境下，学校除改革人才培养模式和方法，提高人才培养质量外，还要重视对外的宣传，基于Web的三维虚拟校园系统是充分利用Internet进行“不到校”宣传的最好方式。此外，现在的大学校园具有校园面积大、机构众多等特点，如何借助于现代信息技术提高学校各项工作的管理效率是非常值得考虑的问题。利用三维校园虚拟系统进行校园规划，可以使管理者在虚拟三维环境中动态交互地对未来校园环境进行全面的审查，避免兴师动众实地考察。

本文通过对某学校三维虚拟校园的分析与设计，借助于Google Map提供的免费高精度二维影像数据，利用SketchUp软件和JavaScript脚本技术、Ajax技术及Note.js技术实现了一个三维虚拟校园系统，该系统可以进行三维校园场景漫游、校园各类信息查询、校园规划审查等功能。

1 系统设计

1.1 系统概述

为了使用户能够身临其境地感知校园风貌及方便游览，该系统通过以下四个方面来表现虚拟校园：第一，根据学校真实的自然风貌对包括各类建筑物、景点、道路、运动场、湖等校园内各个对象进行1∶1建模。第二，考虑加入一些学生、花草树木和汽车等模型来加强真实感。通过文字、图片等富媒体技术手段加以辅助，达到介绍校园的目的。第三，为了方便用户漫游，加强用户与场景的交互，系统实现了鹰眼地图功能以及漫游功能。第四，为使浏览者能顺利地漫游虚拟校园，系统还实现了建筑信息查询等交互功能。系统提供深度利用地图数据的接口以数字校园中其他子系统使用。

1.2 用户需求描述

通过用户面谈、问卷调查等多种形式，历时2个月完成了用户的需求分析，具体的用户需求描述如下。

1）一般浏览用户功能。

（1）全实景浏览。

系统提供自动漫游功能，或由用户交互漫游校园三维全景，用户可以随时结束浏览。

（2）搜索定位。

通过关键词搜索或者分类查询，可以快速定位到要查看的地点，也可通过控制条或直接在地图上拖曳进行三维校园地图的快速浏览。当鼠标停留在相关建筑物时，可以高亮显示建筑物及其名称。

（3）导航功能。

系统提供热点列表或者用户搜索热点功能，点击相应热点单元，可以进行快速定位导航。

（4）分类热点定位。

校园内一般分布着众多如银行网点、ATM机、圈存机、超市等其他服务设施，分类热点定位可以快速定位银行网点、ATM机、圈存机、超市等基础设施。

（5）鹰眼功能。

通过三维校园右下角的鹰眼地图，用户清楚了解整个校园及当前浏览位置，同时可以在鹰眼地图上快速定位导航。

（6）测距功能。

（7）地图控制。

放大、缩小，可以在网页里用鼠标任意查看三维地图，包括4级缩放。 任意拖动，用鼠标可以任意拖动三维地图。

（8）热点信息浏览。

可以通过点击地图热点上的气泡浏览对应热点信息。比如介绍图书馆基本情况、馆藏分布等信息。

2）系统管理功能。

（1）用户权限管理。

系统后台管理模块提供权限管理功能，超级管理员有所有权限，并可分配热点信息维护、区域标注、点标注及地图管理等权限。

其他拍摄对象的反馈也是相似的。他们公开表示，威特金对待他们是充满人道关怀的，说到他是如何使他们成为艺术作品的表现对象，且将作品充满尊严地呈现在公众面前，而这与这个社会将他们掩盖起来、边缘化是完全相反的。实际上，在威特金的摄影作品里，缺陷本身具有一种形而上的力量。“残疾、畸形、卑贱与那些使人颤栗的东西，被带回聚光灯下。”（杰勒马诺·切兰特）

（2）区域标注。

区域标注主要针对大型建筑物的标注操作。把鼠标移到地图上，通过鼠标选定建筑物外围即可标注对应建筑。

（3）区域标注管理。

列表显示区域标注信息，可以进行区域标注信息管理操作。

（4）点标注。

点标注主要针对建筑物内部单位进行标注操作。如：一个区域标注的办公楼里面包含的院系等，就可以用点标注对该院办进行标注。对于多个单位要在同一点进行标注时，可以定义优先级。点标注单位还可通过栏目导航及搜索功能来实现定位。

（5）点标注管理。

列表显示点标注信息，可以进行点标注信息管理操作。

1.3 系统功能设计

通过对用户的需求进行分析，结合数字校园扩展等要求，本系统要完成如图1所示前台用户功能和如图2所示后台管理功能。

2 系统实现关键技术

本系统在真实校园的基础上进行构建。因此，系统设计开发主要分两个阶段：建模阶段和交互阶段。建模阶段主要有两个工作：一是收集规划图、平面图以及各类设施图片等等资料，二是利用SketchUp依据实际尺寸和样式建模，然后对模型进行UV贴图和材质烘焙；交互阶段主要指利用JavaScript脚本技术、Ajax技术及Note.js等技术对建模阶段产生的三维模型实现交互功能包括虚拟对象的交互以及数据的查询等。

2.1 建模阶段

1）建筑物高度获取。

由于建筑图纸缺失，建筑物高度数据是本系统进行三维场景建模时遇到的巨大障碍，尤其是要快速获取众多建筑的高度参数是亟待解决的问题。本文通过以下方法来获取建筑物高度：首先通过获取Google Earth二维影像拍摄的时间模拟太阳在空中的位置，这样使得已经建立的三维模型产生阴影；然后通过调整三维模型的高度使模型所产生的阴影与二维影像的阴影完全重合，重合之后三维模型的高度即为建筑物的真实高度。建筑物高度信息获取流程如图3所示。

2）校园场景建模。

虚拟校园的真实感和使用感受与三维模型建模质量有很大关系。在模型创建过程中，既需要保证模型质量满足真实感要求，同时也需要确保模型加载速度不能太慢。

由于现实环境中的建筑较多，为有效地完成模型的创建，建模时对建筑的结构和外观进行分类，对于结构相同的建筑可以重复使用同一个模型，减轻工作量；对于较复杂的建筑可以对其拆分，理清结构再进行建模。除了建筑之外，还需要对外部场景如树木、路灯、花坛、座椅及特色景观、天空等进行建模。

3）模型优化。

由于虚拟校园场景涉及的模型很多，大量复杂的模型会严重影响到系统的交互速度。因此，在整个创建过程中必须应坚持以下原则。

（1）创建模型时尽量采用标准几何形状。

（2）细长条的物体如栏杆、栅栏等采用面片和贴图方式实现，不要做成模型。

（3）校园中的树木绿化采用面片的十字交叉法模拟即可。

（4）对多余的冗余面进行删除。

2.2 交互阶段

交互阶段在建模阶段生成的地图上实现三维虚拟校园的各种交互功能。建模的地图分为两层：地图层和数据层。地图层用于加载地图图片，处于底层。地图图片的显示根据精细度划分成多个级别，不同的级别对地图进行了不同程度的分割。地图图片根据显示区域的变化进行动态加载。数据层用于显示地图信息。数据层是由各兴趣点的标记数据构成。兴趣点分为点标记标记信息和区域信息，两类兴趣点主要区别在于地理位置信息的表示方法。点信息标记（如圈存机）通过单坐标点实现，区域信息标记（如某一栋建筑物）通过区域的一组边界点的坐标实现。

标记数据以JSON的格式存储在数据库中。位置是以点型标记存储。建筑物是以多边形标记来存储，默认无边框和填充颜色，当标记被覆盖时添加边框和填充颜色。地图加载时读取所有的数据信息。

由于三维虚拟校园系统中三维场景加载对客户端计算机要求较高，所以整个系统使用Note.js来搭建。Note.js使用了一些最新的编译技术，使得用Javascript脚本语言编写出来的代码运行速度获得极大提升。另外，Note.js可以快速构建网络服务及应用的平台，可以编写出可扩展性高的服务器。系统主界面如图4所示。

3 结论

本文利用JavaScript脚本技术、Ajax技术及Note.js技术实现了一个具有交互功能的三维虚拟校园系统。实现的三维虚拟校园系统已经正式投入使用，系统使用起到了口碑宣传、校园指引、网络宣传等作用，得到了用户的高度评价。另外，该系统还可为校园规划和管理提供最直观的表现形式，为数字校园建设提供很好的基础服务。

[1]徐杰.基于3Ds Max三维虚拟校园的设计与实现[J].中国管理信息化，2012，15（17）：122-123.

[2]安洁玉，程朋根，丁斌芬.基于Google Earth二维影像获取建筑物高度的方法[J].地理与地理信息科学，2010，26（6）：31-33.

[3]张瑞菊.SketchUp结合Google Earth在虚拟校园中的应用[J].计算机应用，2013（1）：271-272，279.

[4]任宏萍，周犇.基于Virtools的虚拟校园在线交互设计与实现[J].计算机工程与科学，2011，33（11）：117-121.

[5]李海军，刘霄，何铁宁.虚拟维修系统交互控制方法研究[J].计算机仿真，2010，27（9）：281-285.

[6]李会杰，李雅峰，何循来.基于虚拟现实技术的某型导弹仿真训练系统研究[J].系统仿真学报，2008，20（9）：2323-2325.

[7]欧阳攀，李强，卢秀慧.基于Unity3D的虚拟校园开发研究与实现[J].现代电子技术，2013，36（4）：19-22.