1. 引言
虚拟漫游是虚拟现实技术的一个分支领域，在交通、建筑、游戏等领域，比如建筑设计 [1]、城乡轨道交通施工 [2]、旅游景区 [3] 等方面，虚拟漫游有着重要的作用，例如：王会燕等人基于Pano2VRpro软件和HTML5实现实训中心漫游系统 [4]、习建军等人基于Unity3D游戏引擎实现了江西白梅古村落虚拟漫游系统 [5]。
基于Web的虚拟漫游，将三维软件制作好的三维建筑模型、车辆模型、地貌模型加载到Web前端网页，通过Web技术发布在网络上，从而实现了基于Web的人机交互在线虚拟漫游。其中，运用到html、css、WebGL、JavaScript、3D建模等技术。WebGL为开发者提供了在网页渲染三维模型的技术，其框架之一Threejs有着丰富的功能，为基于Web的虚拟漫游快速开发三维环境和在网页上创建精美的三维图形应用与功能实现方向上提供了大量支持。
目前，基于Web的虚拟漫游系统的最大难点在于三维模型的精细度和绘制效率性的矛盾。由于在漫游时需要景物在离观察者近时显示得逼真，导致制作者在建模时需要将模型做得精细，这会消耗很多时间，同时，受计算机性能的制约，模型越复杂，在实时渲染时达到的效果越差，而渲染的效果太差会让用户无法接受。
整个虚拟现实系统都普遍存在这样的矛盾，一般制作者需要在模型的精细程度与渲染速度两方面取一个折中值，既要满足一定的绘制效果，又不让用户在使用时感到不适。可以运用LOD多层次细节技术将每个场景模型生成不同的细节级别，减少渲染时的计算量 [6]。也可以在保证一定质量下，将非必要模型做得简易，减少模型的大小。
本文基于Three.js技术框架，通过采用LOD多层次细节以及模型面片化方法，借助PhotoShop，Blender、VScode等软件来实现校园漫游系统。
2. 关键技术
2.1. 基于Web的三维渲染引擎
Three.js是一个轻量级的JavaScript编写的WebGL第三方库，提供了原生态WebGL的API接口，同时，它隐藏了3D渲染的细节，将WebGL原生API的细节抽象化，将3D场景拆解为网格，材质和光源；开发者可以使用上层的JavaScript对象，而不仅仅调用JavaScript函数，同时，它还包含了许多实用的内置对象，拥有强大易用的数学库，支持多种三维模型文件格式的加载，可以方便地应用于游戏开发、动画制作、幻灯片制作、高分辨率模型和一些特殊的视觉效果制作，在虚拟漫游系统开发的过程中，利用three.js构建三维场景的流程如图1所示，在三维场景的交互主要通过如下几个关键脚本实现。
Figure 1. Implementation flowchart of the Three.js
图1. Three.js的实现流程图
1) Orbitcontrols.js是three.js提供的轨道控制器，其可以实现以目标为焦点的旋转缩放，同时，平移相机观察场景的操作，其所有的变化都是相机的相对位置在发生改变。
在创建控制器时，会将相机和domElement传入该控件，控件的焦点就是相机的看向点。
旋转功能就是控件通过相机位置减去焦点位置，获得向量，通过向量创建一个球坐标系。相机在球上移动，以鼠标在屏幕上的移动距离来影响其变化，实现绕焦点旋转的效果。
而缩放功能就是根据相机离焦点的距离远近控制缩放比例。
最后的平移功能，与相机的up轴和x轴相交形成一个平面，通过鼠标在屏幕上的移动距离来影响其变化量，实现相机在平面的移动。
2) FlyControls.js是three.js提供的飞行控制器，其启用了一种类似于数字内容创建工具，例如Blender三维图形图像软件中飞行模式的导航方式。
其同样在创建时将相机和domElement传入，获取到相机的位置，旋转等属性，并通过在domElement的鼠标移动，鼠标按下，鼠标按起，按键按下，按键按起五个函数设置事件监听，实现相机的位置移动，旋转等操作，最终达到飞行漫游效果。
3) Octree.js是three.js提供的碰撞检查工具，其基于八叉树实现物体的碰撞检测。八叉树是一种用于描述三维空间的树状数据结构，采用递归的方法。Octree由三部分构成，一是存储结果，其有三个存储变量，分别为存储递归的子结构，当前节点的包围盒，以及当前节点下所有的三角形；二是构造过程，对根节点进行递归的三角形分配，并计算在分配过程中数量大于阈值时则进行递归空间切割，生成新的子树块；三是查询过程，对根节点开始进行递归查询，直至查找到叶子节点或最后的三角形元素。
4) Tween.js是three.js提供的补间动画库，其以平滑的方式修改元素的属性值，当设置好要修改的属性值，动画结束时的最终值和动画时长后，tween引擎会自动计算出补间动画，从而产生平滑的动画效果。
2.2. 模型制作优化策略
对于楼屋建筑，可以在最后导出时，使用Blender软件中的精简修改器进行面数的减少，如图2所示。
Figure 2. Thin modifier in Blender software
图2. Blender软件中的精简修改器
对于校园场景中一些非主要的模型比如汽车、厕所、器材室、车棚、电线杆、电箱、花草树木等，都不是主要的模型，可以采用面片化的方式，减少模型面数的方式减小模型的大小。
以树为例，先在Blender三维图形图像软件中制作出高精度的模型，然后再从各个视角分别将模型的图片导出，用作面片的纹理图，当前的纹理图还不能使用，需导入到PhotoShop图像编辑软件中将不需要的部分设置为透明，导出带透明通道的PNG图片，可将图片质量适当调小，之后创建3个或多个跟模型等大的平面穿插在一起，旋转距离等分，将做好的纹理图放上去，这样就得到一个面片化的模型。利用面片化优化策略处理，得到装饰场景的次要模型，而二者在漫游系统中所呈现的视觉效果相差不大，如图3所示。
Figure 3. Comparison chart of the effect of the precision tree and the patch tree
图3. 精度树和面片树效果对比图
2.3. 渲染优化
当场景中的模型都是用同样高清的模型时，页面在渲染时会比较吃力，在模型较多时，甚至会出现卡屏的情况，而用户在观看场景时，对于距离摄像机视角较远的模型，本身看起来就会比较模糊或者对其的注意力不是很大，如果能根据视角的远近显示相应质量的模型，即视角近的模型用精度高的模型，视角远的模型用精度低的模型，就可以大大地提高页面的渲染效率。
Three.js刚好提供的此项技术——LOD多细节层次技术，其就是在显示网格时，根据摄像机距离物体的距离，来使用更多或者更少的几何体来对其进行显示。
多层次细节模型对象LOD就像一个玻璃箱子一样，你可以向里面放入各种物品，同时设置好每个物品的层级，每个层级里只有一个物品，玻璃箱子通过层级来显示其中的物品，对于LOD来说，物品就是模型，层级就是摄像机与LOD对象的距离值。
通常情况下，会将同一模型制作为多个版本，比如说三个，一个低质量，一个中质量，还有高质量。如图4所示。
3. 系统设计
3.1. 功能设计
校园漫游功能模块如图5所示，本文设计实现的校园漫游系统主要包含第一，第三人称视角漫游，飞行漫游，全景漫游四种模块。
Figure 5. Campus roaming function module diagram
图5. 校园漫游功能模块图
3.2. 架构设计
通过实地考察校园的建筑布局，路线规划，并拍摄高清图片，用以制作校园场景模型时的参考图和纹理图，同时，按照已规划好的功能模块编写脚本文件。
架构设计图如图6所示，用户接口层为用户所直接接触的网页界面，用户可在场景内进行人物控制，视角移动，场景交互，模式切换以及辅助功能开关等功能，中间处理层为用户设置命令请求，场景三维模型载入以及设置交互响应事件。后台数据层就是漫游场景中所使用的音乐、图片、三维模型、脚本文件等数据。
4. 系统实现
本系统的运行流程如图7校园漫游运行流程图所示，场景加载完成后，用户鼠标点击屏幕，进入漫游场景。初始时，背景音乐自动开启，用户默认进入全景漫游模型，可以通过点击页面正下方的四种模式选择按钮进行模式切换，也可以点击页面右上方的辅助按钮开启/关闭建筑名称显示和背景音乐。
4.1. 第一和第三人称视角
本文同时采用了第一人称视角和第三人称视角，第一人称视角可以为用户带来最大限度的场景代入感，能让用户更好地沉浸在场景和画面中，让用户更加细致地感受到场景中的各种细节处理。第三人称视角为用户带来的最大的好处就是自由，当用户处于第三人称视角下的时候，人物和摄影是分开的，可以一边操控人物方位，一边操控视野方向。
在实现方面，首先需导入用作碰撞地形的模型，由于对碰撞地形模型进行初步处理时存在大量的数据运算，所以本文单独制作了一个面数低的白膜，如图8所示，当作碰撞地形模型，其不用显示在场景中，以提高页面的加载速度。之后，就是对人物模型进行碰撞检测以及添加移动和视角响应函数，让其在地面上进行漫游。
Figure 8. Used as a white mold for collision terrain
图8. 用作碰撞地形的白模
4.2. 飞行漫游视角
如图9飞行漫游视角图所示，通过使用three.js库中提供的FlyControls.js，可以很轻松地实现用户飞行模式下的自动漫游，用户在校园内默认向前飞行，可通过键盘和鼠标控制方向和视角移动。在此模式下，用户可以短时间内观察校园内的建筑和景色，体验在校园中飞行的感觉。
4.3. 全景漫游视角
如图10全景漫游视角下主要建筑的名称显示图所示，通过使用three.js库中提供的OrbitControls.js，可以很轻松地实现用户以上帝视角观察完整的校园场景，用户通过鼠标进行视角的缩放、旋转以及平移，在此模式下，用户可以快速地查看校园的建筑、场景以及路线。同时，此项目还设计了交互功能，用户可以点击右上角的名称显示按钮显示学校主要建筑的名称，便于用户查找，当用户点击主要建筑时，建筑有弹起缩放动画，动画是基于tween.js实现。
Figure 10. Display of the names of major buildings in a panoramic roaming view
图10. 全景漫游视角下主要建筑的名称显示图
5. 结论
系统在应用中表现了three.js库中提供的视角控制、物理碰撞、LOD、动画、交互等功能，并采用模型面片化和LOD的方法进行模型和渲染优化，使用户的体验感得到提升。
综上所述，three.js技术具有强大的功能，较高的实用性和技术性，能为虚拟校园漫游系统的设计与开发带来很大便利，让校园内的各种信息可以得到充分展示，也让用户有更加真实有趣的漫游体验。