基于WebGL的三维模型及其信息化技术研究

郑 华 刘 洋

（石家庄铁路职业技术学院 河北石家庄 050061)

基于WebGL的三维模型及其信息化技术研究

郑 华 刘 洋

（石家庄铁路职业技术学院 河北石家庄 050061)

面向Web，基于WebGL技术和three.js引擎，研究三维模型在B/S环境下的展示、分析、子类选取和信息化技术，开发一些支撑Web3D应用程序的中间件，设计了统一的UBSP（Unified Bim Server Platform）平台，解决用户在 Web端的模型上传、模型浏览和信息管理问题，实验结果表明，UBSP系统在模型分析、动画处理、信息化等方面具备了足够的稳定性和实用性，平台适用于建筑、机械、电子等行业的设备运维阶段。

WebGLthree.js UBSP BIM

1 引言

传统的信息化系统以关系数据库为基础，以C/S或B/S架构解决特定领域的业务、安全和流程问题，由于 B/S架构可以免去软件安装的环节，在系统升级、用户使用方面有着天然的优势，现在 B/S架构的系统成为了主流。

然而基于浏览器的应用程序也有其天然的缺陷，比如性能问题、界面问题、状态保存问题、3D图形处理问题等等，这其中最弱的环节便是浏览器的3D图形与动画处理能力。

2009年8月，WebGL绘图技术标准诞生，他可以直接在HTML5的Canvas元素中绘制三维动画并提供硬件三维加速渲染功能，开创了基于Web的3D应用程序的新格局。从此，浏览器端的3D引擎问题有了好的解决方案。

为了简化Web端的3D编程，目前已有大量的基于WebGL技术的JavaScript引擎库，如SceneJS、WebGLU、Three.js等。在众多的引擎中，Three.js以简单、直观的方式封装了3D图形编程中常用的对象，使用了很多图形引擎的高级技巧，极大地提高了性能，是一款优秀的Web端3D引擎。

Three.js面向Web浏览器，解决了3D图形引擎的封装问题，其核心仍然是数学运算，如矩阵、向量、平移、缩放、旋转等，在应用程序端，Three.js并不提供任何封装机制，由此又出现了很多基于Three.js引擎的、面向应用程序的开发框架，Sim.js便是其中一个，他重新封装了Three.js的API，支持用户以面向对象的方式进行3D编程，简化了目标选取、鼠标事件处理、关键帧动画等3D空间中难以驾驭的编程内容。

基于Three.js引擎和Sim.js框架，本文研究了Web环境下的三维模型及其信息化技术，开发了基于B/S结构的3D应用程序中间件，允许用户通过Web直接上传三维模型，根据用户级别的不同，调用不同的中间件，实施不同的信息化方案。

近几年来，BIM（Building Information Model）成为了国内的研究热点，基于B/S架构的BIM服务器是目前最热的研究领域之一，至今还没有非常成熟的应用系统。作者结合上述研究，开发了 UBSP（Unified BIM Server Platform）平台，平台可以面向建筑、机电、装饰、业余爱好者等各行各业，提供统一的三维模型展示及其信息化服务。

2 Web下的三维模型显示与控制

2.1 模型显示

到目前为止，Three.js可以直接支持amf、json、dae、ctm、obj、md2、ply、stl等格式三维模型。无论哪种格式的模型，Three.js最终都会将其解析为若干Object3D（Three.js中关于3D对象的基类）对象的组合，以obj模型为例，导入模型的API如下：loader.load('model.obj','model.mtl',function ( object ) {…});

代码中的 object即为最终返回的Object3D对象，可以直接放入 3D场景（Scene），如图1所示：

如果仅限于模型的整体显示，该方法是可行的，但其缺陷在于不能执行模型的进一步细化处理，因为loader方法会将整个模型文件封装成一个独立的3D对象，只能做整体处理。

2.2 模型控制

模型加入场景以后，要允许用户从不同角度来查看模型，Three.js封装了很多场景控制类，其中最常用的两个类是First Person Controls和Trackball Controls，前者用于第一人称漫游控制，后者用于旋转、平移和缩放控制，系统预定义了一些控制热键，表1即为Trackball Controls类的控制热键，用户可根据需求自行拓展其他热键。

图1 导入obj模型

表1 THREE.Trackball Controls中的控制键

需要注意的是，Three.js内置的场景控制类并没有提供碰撞检测机制，在巡游过程中会出现摄像机穿墙而过的情况，这部分功能需要用户自行解决。

由于大多数建筑具有横平竖直的特点，为提高效率，可以使用AABB（Axially Aligned Bounding Box，轴对齐矩形边界框）包围盒算法，即先对模型进行子类拆解，然后为每个子类计算包围盒，在每一次摄像机的位移过程中，通过判断摄像机是否与包围盒相撞，实现碰撞检测机制，主要代码如下：

3 Web下的三维模型拆解与重组

3.1模型拆解

loader方法会将整个模型文件封装成一个独立的Object3D对象，需要将其逐个拆开，这样才能为每一个子类进行独立的信息化管理。

Object3D本质上是一个抽象类，该类声明了一些3D对象的基本私有属性，如ID、名称、位置、本地矩阵和世界矩阵等，除此外还声明了一个私有属性：children数组，该数组包含了 Object3D对象的所有子类。

通过遍历children数组，即可得到模型中的所有子类，从而实现模型拆解，如图2所示，在“模型信息”栏中，可以看到该模型共包含711个子类。

通过调用traverse函数可以递归遍历children数组，比如：

图2 通过children数组获取所有模型子类

3.2 模型重组

拆解出来的模型子类有两个用途，一是用于碰撞检测，二是便于对子类实施信息化管理。子类在加入场景以前先要进行实例化、注册鼠标事件等操作，然后在原位置上重新置入场景即可完成模型的重组。

需要注意的时，在模型文件中并不只是包含网格(Mesh)对象，还会有一些其他信息，比如灯光、摄像机、骨骼、动画等数据，因此在模型重构时，要过滤掉与场景无关的对象。在UBSP系统实现中，只提取了模型中网格对象，灯光、动画部分的内容则由程序后期根据需要自行添加，比如场景颜色和亮度控制、模型子类的动画控制（如开关门、鼠标经过时点亮子类等动作）。

Three.js并没有提供Object3D对象的事件注册机制，Sim.js框架中对这部分内容进行了封装，常用的鼠标事件包括：handleMouseOver、handleMouseOut和handleMouseDown，前两个事件可用于子类点亮和一些AJAX程序，第三个事件即鼠标单击事件，可用于实现模型子类的信息化管理。模型重组部分的主要代码如下：

//实例化每一个子类并加入场景

4 Web下的三维模型信息化系统实现

4.1 模型格式及场景自适应问题

在3D建模领域，由于没有统一的标准，不同厂商都定义了自己的3D模型格式，但最核心的内容都是网格对象及其点、线、面等参数的定义。其中Autodesk公司的Obj格式由于文本存储、没有专利限制等优点而被广泛采纳，几乎所有的建模工具都能导出这种格式的模型。在UBSP系统实现中，仍然采用了这种格式。

在UBSP平台中，模型由用户自行上传至服务器，因此存在模型尺寸要自适应 3D场景的问题。模型有大有小，在浏览器上呈现出来时，必须保证以合适的角度、比例、位置来显示模型。UBSP系统通过对模型进行分析计算，得到模型的最大的外立方体包围盒，根据此包围盒计算摄像机的位置和朝向，从而达到良好的呈现效果。

图3 关键帧动画与AJAX提示信息

4.2 界面问题

在UBSP系统实现中，两个最关键的界面问题是鼠标经过子类时的点亮效果和异步信息提示问题，如图3所示。

子类点亮效果可以通过修改材质的emissive属性并辅以关键帧动画来实现，其中关键帧部分的主要代码如下：

//定义关键帧动画类

//定义关键帧数据

MeshBox.Keys = [0, 0.5, 1];

MeshBox.EmissiveValues = [{ r: 1, g: 1, b: 0 }, { r: 1, g: 0, b: 0 }, { r: 1, g: 1, b: 0}];

这段代码将产生一个以0.5秒为周期的，在黄色和红色之间不断过渡的颜色动画，用于点亮子类时效果非常明显。

另外一个异步信息提示的界面问题，可以直接通过AJAX和JSON来实现，保证在不刷新整个网页的前提下，局部更新网页内容，更新过程由系统在后台完成。

4.3 数据库及其与模型的关联问题

UBSP系统被设计为一个提供公共三维模型信息化服务的平台，所有模型的子类信息数据将被保存到同一张数据表（T_Model_Info）中，表结构如下：

表2T_Model_Info的表结构

这样的设计为信息化管理提供了一定的可扩展性，将来可以根据名称、时间、模型id等字段进行分类查询。

模型和数据库的关联，最关键的问题是Sub_id字段如何与模型子类建立关联关系，Three.js引擎在解析模型文件时会为每一个子类顺序分配一个geometryid，程序可直接引用该参数，比如：

mesh.name = box.geometry.id;

UBSP系统中，基于模型子类的信息化管理界面如图4所示。

图4 基于模型子类的信息化管理

除此外还有一些其他的数据表，比如T_Models和T_Users分别用于保存模型数据和用户数据。

4.4 Web服务器

UBSP系统的服务器环境为：SQL Server 2008数据库 + IIS7.0 + ASP.NET4.0；客户端测试环境为：Intel Core™2双核CPU、2G内存、NVIDIA GeForce 9400 GT显卡；建模软件为：Revit 2014中文版、3ds Max2010中文版。

5 结论

本文面向Web，针对B/S环境下的三维模型信息化难题，设计并实现了统一的UBSP（Unified Bim Server Platform）平台，根据用户级别的不同，开发了三个不同的3D应用程序中间件：场景巡游、模型拆解和模型信息化，解决了Web端用户的模型上传、浏览和信息管理问题，可以为建筑、机电、装饰、业余爱好者等行业，提供统一的三维模型展示及其信息化服务。

与现有的基于B/S结构的BIM服务器相比，UBSP系统的最大亮点是其通用性，用户只需在平台上注册用户即可获得模型信息化服务，无需定制，使用方便，节约成本。

最后，UBSP并不提供建模功能，他只是提供模型分析和信息化服务，因此，UBSP系统适用于模型运维阶段。

[1]张建平,余芳强,李丁.面向建筑全生命期的集成BIM建模技术研究[J].土木建筑工程信息技术,2012,4(01):6-14.

[2]王珩玮,胡振中,林佳瑞. 面向Web的BIM三维浏览与信息管理[J].土木建筑工程信息技术,2013,5(03):1-7.

[3]刘爱华,韩勇,张小垒.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息,2012,10(05):79-81.

[4]王磊,高珏,金野.基于Web3D无插件的三维模型展示的研究[J].计算机技术与发展,2015,25(04):217-220.

[5]谭文文,丁世勇,李桂英.基于webGL和HTML5的网页3D动画的设计与实现[J].电脑知识与技术,2011,7(28):6981-6983.

[6]霍冬,郑伟华,盛步云. 基于WebGL的机械产品三维展示技术研究[J].制造业自动化,2013,35(09):73-77.

[7]周敬敬,陈昕,吴开超.利用 WebGL技术实现机房动态虚拟装配设计的可视化[J].科研信息化技术与应用,2013,4(02):87-92.

[8]赵学伟,沈旭昆,齐越. 基于Web的交互式三维发布系统[J].计算机工程, 2007,33(22):5-7.

[9] Cantor D. WebGL Beginner’s Guide[M]. Birmingham, United Kingdom: Packt Publishing, Limited, 2012

[10]P.M.Hubbard.Approximating polyhedra with sphms for time-critical collision detection[J].ACM TrimsGraph,1996,15(3):179-210.

Research on 3D Model and Information Technology Based on WebGL

ZHENG Hua LIU Yang
(Shijiazhuang Institute of Railway Technology Shijiazhuang 050061 Hebei China)

Oriented to Web, based on WebGL technology and three.js engine, this paper studied the display, analysis, sub-model selection and information technologies of 3D model in the B/S environment. Some middleware for supporting Web3D applications are developed, a unified UBSP(Unified Bim Server Platform) platform is designed, the model upload, browsing and information management issues in the Web are solved. Experimental results show that UBSP system has enough stability and practicality in model analysis, animation processing and information technologies, which is suitable for construction, machinery, electronics and other industries of the equipment maintenance phase.

WebGL three.js UBSP BIM

A

1673-1816(2017)01-0064-07

2016-03-12

郑华（1977-），男，汉，安徽歙县人，本科，副教授，研究方向关系数据库、计算机网络技术。

项目支持：河北省教育厅2016青年基金项目，基于B/S结构的BIM服务器中间件技术研究，基金号：QN2016215