孟丽丽，季 昆，王佳琪

(1.华北理工大学 机械工程学院，河北 唐山 063210；2.华北理工大学 建筑工程学院，河北 唐山 063210)

0 引 言

在我国多地的众多重点院校，已积极地投入到了虚拟现实技术领域的科研行动，使用不同的方法来构建数字校园[1-3]。比如武汉理工大学研究了VR虚拟漫游技术中三维场景的建模以及交互设计；厦门理工大学尹大伟等研究了虚拟校园漫游系统实现中的检测碰撞以及角色交互等实现机制；山东理工大学高猛研究了漫游系统中的角色控制技术[4-6]。总体来讲，虚拟校园漫游技术取得了一定的成果，其漫游技术包括电子式地图和网络三维可视化两个方面[7]。但也有一些学校开发的漫游系统，漫游功能受限、模型建立较为粗糙，很难给用户带来完全沉浸式和高交互性的体验。近些年，互联网三维技术得到很快地发展，在Web网页上实现三维场景交互逐步变为研究的热点[8]。鉴于此，本文以华北理工大学为研究对象，将传统的几何建模技术与基于图像的绘制技术进行结合，并从不同功能视角进行漫游设计，使得用户直接通过Web网页在校园中进行自由漫步，同时又可以在特定的场景中进行环视，犹如亲身站在校园中观看景观，既增强了用户体验，又增强了媒体的交互性和沉浸感，对学校的形象宣传、信息化管理将产生重要的作用。

1 虚拟校园漫游系统方案设计与开发流程

1.1 虚拟校园漫游系统方案设计

华北理工大学坐落在沿海现代化城市、环渤海经济区工业重镇——唐山市唐山湾生态城，学校主要由A区、B区、C区、D区4个区和梅园、兰园、竹园、菊园4个生活区，以及核心教学区、图书馆、校礼堂等建筑组成。为了更加逼真地展示真实的校园场景，在虚拟校园漫游系统开发过程中，本文以Photoshop作为图像处理工具、AutoCAD对校园场景图片进行线条描绘、3DSMAX进行场景建模、Unity3D 进行漫游系统的开发与设计，最后进行系统的整合，完成在线发布。

本文在设计华北理工大学的虚拟漫游系统时主要解决以下问题：①华北理工大学三维模型的主体内容的构建；②华北理工大学三维虚拟场景建模技术与优化技术；③场景交互技术的设计与实现。

本系统按照如下步骤和技术路线来实现上述的设计：

(1)进行华北理工大学三维模型的构建。通过实地考察和实景拍照，获得华北理工大学各处建筑物的平面图层数据和实景图像。考虑到学校面积较大，该系统通过谷歌地图(Google Earth)和学校官方微信获得学校的地形俯视图，并导入AutoCAD中进行二维线条描绘，利用Photoshop对实景图像进行处理，转换成3DSMAX需要的纹理贴图。然后开始构建学校的三维模型。经过处理后，将建成的模型以.fbx格式导入到Unity3D平台，实现系统的各个功能。

(2)学校全景展示。利用谷歌地图API生成学校各个建筑物、道路、大门等的布局图，将之前制作好的校园场景图与谷歌地图上的华北理工大学场景对应关联，并通过互联网生成华北理工大学的URL。

(3)四季场景技术展示。本文以对华北理工大学春季场景为设计基础，更换天空背景，改变花草的颜色以及树木的预设体和粒子系统制作的雨滴的预设体以及通过代码C#生成顶点和面片并用Shader代码渲染和控制Shader的参数，实现不同四季场景的展示。

1.2 虚拟校园漫游系统开发流程

华北理工大学虚拟校园漫游系统的开发遵循着系统开发的一般步骤，即经过系统分析、设计、开发、测试、反复修改且渐进完成所规划内容[9]。本系统的具体开发主要可分位两大部分：其中第一部分是通过CAD和3DMax对校园的环境和建筑等进行建模，构建华北理工大学的三维模型；第二部分是将三维模型导入到Unity3D中，通过代码实现用户与华北理工大学虚拟校园场景的交互。具体的设计流程如图1所示。

图1 系统详细设计流程

2 关键技术与实现

2.1 模型的构建

在对校园进行三维建模时需要精确掌握校园中的各个场景的基本信息。

(1)本文通过谷歌地图获得校园整体尺寸比例，和学校设计图纸得到学校各个建筑物的轮廓数据。

(2)通过学校官方微信发布的高清校园平面图，并将其导入AutoCAD中利用描点工具将二维线条描绘，并依据所获得数据进行合理的缩放，使模型的二维轮廓大小与实际建筑相差不大。

(3)将调整好的二维线条导入3DSMAX中，过程中可能会有部分点断开，所以需要运用二维捕捉，利用画线工具重新进行描点[10]。然后添加挤出或者壳修改器挤出模型的粗模。这里挤出高度为5层楼的高度，约为15 m。然后进行模型的细加工，将建立出的粗模转换为可编辑多边形，在编辑多边形的顶点层级、边层级以及多边形层级分别进行编辑处理，额外建造出窗户、百叶窗、门等小模型，利用合并命令将其整合在同一个建筑上，同时也结合基本几何体的排列组合方法进行操作，合理安排建筑位置，使建筑更复合校园场景。各个建筑先独立完成，然后再进行合并，以建立出想要建立的模型。

(4)三维模型建立完整之后需要对其进行贴图材质的赋予。本文利用图像处理软件Photoshop将采集到的图片进行剪裁、对比度、饱和度、以及曝光度处理[11]。将处理过的贴图赋予到材质编辑器中的材质实例球上并进行UVW贴图的调整，以增强模型的真实感。材质类型选用stan-dard 标准材质，使后期将模型导入到Unity中材质不会丢失，得以保留。贴图后的校园B区模型如图2所示。

图2 贴图后B区模型

2.2 三维场景的优化与整合

学校建筑物较多，场景包含过多的模型，模型建立完成后文件占用内存过大，导致用户在操作上出现等待较长的时间，为改善这种情况则需对模型进行优化[12]。缩小模型的总体大小，为后面Unity3D功能开发提供便利，增强系统的流畅度，使游览者拥有更好的漫游体验。此次模型优化采用了以下方法：

(1)同一种材质的物体其中之一转化成可编辑多边形，然后对其使用附加命令，将一栋楼中所有物体附加到一起之后使用塌陷命令，方便建筑整体移动和减少物体的面数。在制作小模型的时候，充分利用合并命令，例如路灯、垃圾桶、窗户、门等，利用合并命令将多个物体转化成一个物体，减小场景中物体数量，进而减小了文件大小。

(2)使用贴图来代替复杂的建筑模型。因为特别复杂的模型直接建立，模型面的数量会增加，导致文件的体积增加。另外，使用的贴图照片要尽量小，系统中使用的模型选择的是几十k的png或jpg格式图片。

(3)场景中模型的距离适当。模型的面距离比较近，容易引起闪烁，较远的时候使得内存增大并且会使相同的材质无法合并。同时在保证基本相似的情况下，删除部分小模型和在漫游过程中不可见的面。

(4)在Unity3D中的导入界面，根据模型内存的大小和适合普通电脑运行的模型大小，选择网格压缩对模型进行适当压缩[13]。有低度压缩、中度压缩和高度压缩3个选项。一般选择低度压缩和中度压缩。而高度压缩会破坏模型原有的结构。

模型的各个部分完全建立之后，对各部分进行整合处理。本系统是在3DSMAX中搭建一个个独立模型后合成一个较为完整的校园场景，将模型直接合并于3DSMAX中，在3DSMAX中利用对齐、捕捉等操作实现模型的集成。场景整合后导出fbx格式的场景文件。导入Unity3D中为下一步做准备。

3 交互设计与实现

将整合后的场景模型导入到Unity3D中进行交互设计与实现。结合JavaScript和C#.Net语言实现场景交互。其中不同的漫游形式、不同季节的漫游、校园官网和地图导航以及信息交互是其主要功能。

3.1 漫游功能的实现

本系统漫游形式分角色漫游和自由漫游，角色漫游是有人物参与，身临其境，漫步校园，在Unity3D中使摄像机位于角色的后上方跟随角色。自由漫游技术以独立于角色的一种视角在场景中任意漫游，此形式下摄像机位于整个场景的后上方俯瞰场景，不跟随角色。角色漫游方式是通过鼠标与键盘控制人物行走、跳跃、转换视角。自由漫游方式通过鼠标转换方向，键盘控制上下前后左右的前进，校园漫游如图3和图4所示。下面主要介绍角色漫游实现的关键技术以及不同季节场景技术的实现。

图3 角色视角漫游

图4 自由视角校园漫游

3.1.1 角色漫游技术中相机环视控制及相机跟随

本系统角色漫游技术的实现中采用父子关系的方式来实现相机跟随。Unity3D中摄像机相当于人物的眼睛，在人物位置变动时对摄像机进行控制，将摄像机放在人物中，并一直跟随鼠标移动。人物角色当作父物体，摄像机作为人物角色的子物体。并将第一人称摄像机作为第三人称摄像机的子物体，通过响应鼠标的输入来进行旋转。使摄像机跟随角色运动，以达到触觉和视觉上身临其境的感受。代码完成后赋予第三人称摄像机。核心代码如下：

public class MouseLook： MonoBehaviour {

public enum RotationAxes{…}

public RotationAxes axes=RotationAxes.MouseXAndY;

public float sensitivityX=15F，sensitivityY=15F;

public float minimumX=-360F，maximumX=360F;

public float minimumY=-60F，maximumY=60F;

float rotationY=0F;

void Start(){…}//使刚体不改变旋转

void Update(){…}//调整角度

}

3.1.2 不同季节场景技术的实现

基于场景风格化设计的思想，为增强用户的体验感，更好地展示华北理工大学不同场景的校园景观。本系统根据季节性的变化，设计了4种不同的场景，即春季、夏季、秋季、冬季。本系统以春季场景为设计基础；秋季场景在春季场景的基础之上，更换天空背景，改变花草的颜色以及树木的预设体；夏季场景则在春季场景的基础之上，更换天空的背景，增添一个由粒子系统制作的雨滴的预设体；冬季在夏季的基础上更换天空背景，改变花草的颜色以及树木的预设体，使用代码C#生成顶点和面片并用Shader代码渲染和控制Shader的参数使雪花飘起来，以达到不同季节不同景观的效果，能够较为真实的模拟学校四季的自然环境，如图5、图6所示。

图5 冬季场景

图6 夏季场景

用户可通过场景界面上的按钮实现对不同场景的切换。代码完成后赋予任意物体即可。核心代码如下：

public class season: MonoBehaviour {

void OnGUI(){ if (GUI.Button(new Rect(410，0，85，30)，"春季Spring")){…}

if (GUI.Button(new Rect(495，0，85，30)，"夏季Rain")){…}

if (GUI.Button(new Rect(580，0，85，30)，"秋季Autumn")){…}

if (GUI.Button(new Rect(665，0，85，30)，"冬季Rain")){…}

}

void Start(){}

void Update(){}}

3.2 校园官网和地图导航的实现

为方便用户快捷地了解华北理工大学的校园相关信息和查找学校各建筑的地理位置与布局，系统在场景界面中添加了学校的官网链接和百度地图的链接，通过点击相应的按钮，即可快速登录到相应的网站。代码完成后赋予任意物体即可。核心代码如下：

public class website: MonoBehaviour {

void Start(){}

void Update(){}

private void OnGUI()

{if (GUI.Button(new Rect(0, 0, 130, 30), "华北理工大学"))

{Application.OpenURL("http://www.ncst.edu.cn/");

}

if (GUI.Button(new Rect(240, 0, 90, 30), "地图导航"))

{Application.OpenURL("https://j.map.baidu.com/gw2oP");

}}}

3.3 信息交互功能实现

信息功能交互的实现，可以提高用户的体验感，帮助用户对学校各处建筑物的了解。信息交互功能的实现需靠代码来实现，用户通过鼠标点击建筑即可弹出相应建筑的简介的功能，如图7所示。代码完成后赋予要显示信息的物体即可。系统为学校、图书馆、核心教学区以及大学生服务中心添加了信息窗口，为用户进一步了解学校的相关信息提供了很好的平台。核心代码如下：

public class information: MonoBehaviour {

public bool WindowShow=false;

void Start(){}

void Update(){}

void OnGUI()

{

if (WindowShow)

GUI.Window(0, new Rect(10, 30, 700, 850), MyWindow, "图书馆简介");

}

void MyWindow(int WindowID){…}//对话框函数;

void OnMouseDown()//鼠标点击事件;

{…}}

图7 校园信息窗口

4 结束语

本文采用三维建模的方法，通过3DSMAX三维建模软件构建华北理工大学的各种场景建筑物，利用Photoshop图像处理软件将材质贴图应用到建筑物中，并通过Unity3D游戏开发软件将虚拟现实技术应用到数字化校园的建设中。开发了一套具有基本校园漫游功能、场景变换、校园官网和地图导航链接、信息交互以及不同的漫游方式的虚拟校园漫游系统。最后集成整合与HTML，完成基于Web的虚拟现实校园的开发。用户可通过网络进行校园漫游，并对校内不同建筑和场景进行了解，获得更真实的感受。因本系统制作了校园大部分的建筑模型，场景模型大部分是用贴图处理的，又开发了4种不同的季节场景。所以场景文件比较大，虚拟与现实场景有所差别，导致不同的季节场景切换的时间会比较长。所以模型优化和场景逼真性将是本系统需要改进的一个非常重要的方向。