CN113901367A - 一种基于WebGL+VR的BIM体量模型展示方法 - Google Patents

Abstract

一种基于WebGL+VR的BIM体量模型展示方法，属于建筑信息模型技术领域，本发明通过Revit软件建立BIM三维模型；通过VisualStudio软件添加RevitAPI相关引用并使用C#语言编译的建筑模型信息提取插件；将Revit软件中3D参数化模型信息进行深度提取并输出为XML文本格式；通过WebGL技术将三维建筑模型还原到Web端中；通过Three.js的全景图预览js插件；通过HTML5并基于JavaScript语言实现对页面的设计；通过JSON文本格式对数据进行处理，将各楼层房间name与导航系统中的name相关联，将各楼层房间id与展板信息id相关联，完成功能模块的开发。

Description

一种基于WebGL+VR的BIM体量模型展示方法

技术领域

本发明属于建筑信息模型技术领域，具体涉及的是一种基于WebGL+VR的BIM体量模型展示方法。

背景技术

BIM(Building Information Modeling)技术由Autodesk公司在2002年率先提出，目前已经在全球范围内得到业界的广泛认可。BIM技术以建筑物为对象，通过信息模型的建立，对其三维空间构造、内部结构以及管理属性等数据信息进行微观层次的表达。它可以辅助实现建筑信息的集成，贯穿建筑的设计、施工、运行直至建筑全寿命周期的终结。它将各种信息始终整合于一个三维模型信息数据库中，设计团队、施工单位、设施运营部门和业主等各方人员可以基于BIM进行协同工作，有效提高工作效率，节省资源，降低成本，实现可持续发展。

VR全景技术是基于全景图像的真实场景虚拟现实技术，是虚拟现实技术中非常核心的部分。全景是把相机环360°拍摄的一组或多组照片拼接成一个全景图像，通过计算机技术实现全方位互动式观看的真实场景还原展示方式。

由于不同BIM软件间数据存储格式无法通用，数据交互困难，“信息孤岛”的问题日益凸显，国际通用的IFC数据格式标准在我国的应用并不是很理想，除此之外，运用网页端展示体量模型并搭建应用平台存在一定的交互困难。

发明内容

为了克服现有技术的缺点，本发明提供一种基于WebGL+VR的BIM体量模型展示方法。

本发明的核心是通过Revit2016软件建立BIM三维模型；通过Visual Studio 2019软件添加RevitAPI相关引用并使用较为主流的C#语言编译的建筑模型信息提取插件；将Revit软件中3D参数化模型信息进行深度提取并输出为XML文本格式；通过WebGL技术将三维建筑模型还原到Web端中，实现模型全信息轻量化展示；通过Three.js的360×180度全景图预览js插件：Photo Sphere Viewer，实现各个房间的VR展示；通过HTML5中css、js、html文件，基于JavaScript语言实现对页面的设计；通过JSON文本格式对数据进行处理，将各楼层房间name与导航系统中的name相关联，将各楼层房间id与展板信息id相关联，完成功能模块的开发。

本发明将BIM三维模型在网页端展示，通过VR全景技术，加入房间展板信息和赛事情况，展示了房间实景；运用WebGL技术，HTML5技术，基于Revit API、C#语言、JavaScript语言、XML文本、JSON文本、Three.js引擎、Photo Sphere Viewer插件，研究了体量建模、关键信息提取、参数传递、信息数据解析、信息数据处理、网页端设计等技术，通过具体案例展示了Revit体量模型在网页端展示的应用。

本发明通过以下技术方案予以实现。

一种基于WebGL+VR的BIM体量模型展示方法，包括以下步骤：

S1、体量模型建模；

①、打开Revit2016软件→选择“族”的子菜单“新建概念体量”→选择“公制体量”菜单并打开；

②、打开项目浏览器的“立面”菜单，进入任何一个立面创建标高；

③、打开“视图”选项卡的子菜单“楼层平面”，选中并复制步骤②所创建的标高；

④、进入标高1，选择“创建”选项卡的“参照平面”，为体量模型定位；

⑤、用“模型线”中的“直线”命令，在参照平面上绘制相应的矩形，用快捷键“TR”进行修剪；

⑥、选择步骤⑤绘制的矩形轮廓，按住Ctrl同时选择已经绘制好的轮廓表面，选择“功能区”→“创建形状”→“实心形状”；

⑦、进入三维，修改高度，完成体量模型的创建。

S2、模型提取

通过Visual Studio 2019软件添加Revit API相关引用，并使用C#语言编译的建筑模型信息提取插件，将Revit软件中3D参数化模型工程信息进行深度提取并以XML文本格式输出；

S3、JavaScript语言解析XML数据文件

S3-1、利用Three.js框架完成三维模型网页端展示的准备工作；

S3-2、完成步骤S3-1准备工作后，调用XML文件载入库loadxmldoc.js；

S3-3、输入存储三维模型的XML文件路径，实现浏览器对XML文件的读取，形成模型信息的节点树；

S3-4、浏览器对XML格式文件的解析包括以下步骤：

(1)在JS中声明四个数组，分别命名为Layers、Material、Appearances、Elements，对应XML文件中四个枝节点，每个数组用来存放对应节点下的数据信息；通过调用root.getElementsByTagName().getAttribute()方法，得到每个标签下构件的数据，并循环遍历节点树中四个枝节点下所有子节点，完整获取到模型的几何信息和属性信息，并以Object对象的形式分别存放到上述数组中，后续工作中所需的数据可以直接通过遍历数组的方式获取；

(2)WebGL中三维模型以三角网格形式呈现，三角网格生成需要创建几何体和定义材质：在JS中创建几何体对象geometry，geometry有vertices和faces两个属性，通过循环遍历Elements数组中三角面片的顶点坐标数组和面索引数组，获取相应的vertices和faces属性值；调用Vector3()和Face3()两种构造函数，计算顶点法向量和面法向量，完成几何体在浏览器场景中的创建；

Revit API实例数据均以字符串类型存储在XML文件中，对获取的三角面片几何信息进行数据类型转换，获得Three.js中几何体生成需要的数值类型数据；

(3)几何体创建完成后为三角网格定义材质：在JS中创建网格材质对象Meshmaterial，其中包含颜色、纹理、光泽度属性，运用THREE.MeshPhongMaterial为体量模型赋予材质；

(4)当几何体创建完成并且添加网格材质信息后，调用构造函数new THREE.Mesh(geometry,meshMaterial)在场景中生成网格，即生成所需的三维模型，完成Revit体量模型在网页端重建，实现了JavaScript对XML数据文件的解析；

S4、WebGL模型渲染

新建HTML文件，将Three.js文件作为外部文件复制到项目目录中，引用相关的库，之后通过编写JavaScript代码对整个项目进行操作：首先创建模型所需要的顶点即对XML进行解析；创建一个几何图形对象，并将顶点传递给几何图形对象；创建模型的纹理对象即材质；通过THREE.Mesh＝function(geometry,material)的第一个参数THREE.Geometry类型的顶点和顶点之间连接关系的对象geometry和第二个定义的材质参数Materia创建网格对象，并将几何图形对象以及纹理对象传递给网格对象；通过scene.add()的方法将网格添加到可容纳网格对象的容器内；

S5、功能界面

基于WebGL的开源框架，使用Three.js类库，通过JavaScript语言引用HTML5中.css样式文件、.js方法文件、.html代码集文件进行编程，完成建筑信息模型可视化平台搭建。

进一步地，所述步骤S2进行模型提取之前，先进行程序调试并满足功能等要求：新建工程，添加“GeometryGymIFC”、“RevitAPI”、“RevitUIAPI”引用和使用到的命名空间，创建IExternalCommand接口，使用FilteredElementCollector过滤器获取元素集合并通过提取到的相关数据赋值给XML相应的节点目录，调用Execute函数返回Succeeded提交命令。

进一步地，所述步骤S3-1中，XML文件结构为节点树状结构，每个节点都有其专属标签，根据用户需要将不同种类的数据信息存放到不同的节点中用于解析和查询，所述XML文件包括LayerList、MaterialList、ApperanceList和ElementList四个标签，四个标签中分别存储了BIM模型的楼层信息、材质信息，外观信息、几何信息；其中，楼层ID、楼层属性信息存储在楼层节点LayerList中；材质ID、材质名称、材质类别、RGB值存储在材质节点MaterialList中；外观ID、外观名称、外观贴图路径值存储在外观节点ApperanceList中；ElementList当中，几何信息的表达为vertex、face、edge，即点坐标和面索引值；Revit的网格是多边形网格，由顶点以及对应的三角形组成，用于对三维面的表示。

与现有技术相比本发明的有益效果为：

本发明对BIM软件进行二次开发，运用BIM-XML-Web相结合的技术，通过对BIM三维建筑模型中信息数据进行全面提取，保存为XML格式，并通过WEBGL技术，进行跨平台展示，解决信息孤岛问题；针对BIM软件对硬件需求过高问题，利用WebGL技术对BIM模型进行网页端全信息重建，实现三维模型在网页端的轻量化展示，通过对体量模型的建立、提取、网页端重构，很好的展示了模型的楼层分布情况即平面图展示以及房间定位信息，加入VR全景查看，让浏览者通过网络即可获得三维立体的空间感觉，犹如身在其中，促进BIM在建筑领域的发展和应用。

附图说明

图1Application-Document-View-Element关系图；

图2为Revit API常用类继承关系图；

图3为插件创建流程图；

图4为XML文件框架创建流程图；

图5为XML文件结构示意图；

图6为本发明总流程图；

图7为透视投影相机示意图；

图8为正交投影摄像机示意图；

图9为模型变换操作方法流程图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细描述。

一种基于WebGL+VR的BIM体量模型展示方法，包括以下步骤：

S1、体量模型建模；

Revit中的体量工具是概念设计中的核心模型，在项目的概念设计阶段或设计的前期，用户往往需要从建筑的形体和体块关系入手，运用体块模型能够很快的分析和推敲建筑形体和空间，利用体量分析工具能快速统计楼层面积等指标，方便用户根据设计要求快速调整体量模型。本发明运用Revit中的体量工具完成模型的创建。

①、打开Revit2016软件→选择“族”的子菜单“新建概念体量”→选择“公制体量”菜单并打开；

②、打开项目浏览器的“立面”菜单，进入任何一个立面创建标高；

③、打开“视图”选项卡的子菜单“楼层平面”，选中并复制步骤②所创建的标高；

④、进入标高1，选择“创建”选项卡的“参照平面”，为体量模型定位；

⑤、用“模型线”中的“直线”命令，在参照平面上绘制相应的矩形，用快捷键“TR”进行修剪；

⑥、选择步骤⑤绘制的矩形轮廓，按住Ctrl同时选择已经绘制好的轮廓表面，选择“功能区”→“创建形状”→“实心形状”；

⑦、进入三维，修改高度，完成体量模型的创建。

S2、模型提取

通过Visual Studio 2019软件添加Revit API相关引用，并使用C#语言编译的建筑模型信息提取插件，将Revit软件中3D参数化模型工程信息进行深度提取并以XML文本格式输出；

Revit API(Application Programming Interface)是应用程序开发接口，使用.NET相关的语言来编程，Revit API可以访问模型的图形数据；访问模型的参数数据；创建、修改、删除模型元素；创建插件UI进行增强；创建插件完成对重复自有工作的自动化；集成第三个程序；执行一切种类的BIM分析；如何自动创建项目文档等。通过SDK文件能够很好的了解API的用法，且提供了大量的示例代码。顶层类Application、Document与View类、Element类的关系如图1所示。API类对象中常用类的继承关系如图2所示；

本发明为实现BIM三维模型在Web端重建，以体量模型为例，主要提取模型的几何信息和属性信息。几何信息主要是模型的坐标点，属性信息包括模型的类型、材质、尺寸等信息。根据模型的图元内容不同，所提取的内容也不同。体量模型的信息提取主要分为：提取内容、提取方法、生成中间格式三个部分；

S2-1、提取内容：

利用Revit2016软件建立三维建筑模型，包括建筑、结构、机电安装等多个单位工程。模型分为整体模型和体量模型两个部分，主要提取模型的几何信息和属性信息，几何信息主要是模型的点坐标、面索引、法向量等，属性信息包括模型的类型、材质、尺寸等信息；

S2-2、提取方法：

本文基于对Revit软件的学习使用及二次开发技术实现对建筑信息模型数据的提取。RevitAPI提供了专门的导出类CustomExporter，通过自定义一个导出类，继承IExportContext类，实现接口里面所有的方法，通过调用Execute(ExternalCommandDatacommandData,refstring message,ElementSet elements)函数接口，然后创建过滤器，用于筛选体量模型和Revit模型的楼层、楼梯、墙、门等数据信息；

通过以下核心代码获取全部元素，方便判断元素数量，以免提取过程中造成数据丢失：

FilteredElementCollectorcollectorAll＝new

FilteredElementCollector(uiDoc.Document)；

collectorAll.WherePasses(newLogicalOrFilter(newElementIsElementTypeFilter(false),new ElementIsElementTypeFilter(true)))；

TaskDialog.Show("全部",collectorAll.ToElements().ToString())；

通过ViewSetGetAllViews(Document doc)方法调用，获取所有视图，通过GetViewDisplayName()中的ViewType.name来获取视图名称，并判断当前视图是否为三维视图。

通过几何属性Geometry获取GeometryElement的实例。这个实例里面存储了所有相关的几何对象，如实体、线等。遍历GeometryElement实例来得到一个几何实体solid，这个几何实体solid的Faces和Edges属性里面包含了所有的几何面和边。遍历Faces属性得到所有几何面。遍历Edges属性得到所有的几何边。

获取模型材质信息主要通过Material.AppearanceAssetId获取到AppearanceAssetId；取得的AppearanceAssetId取得AppearanceAssetElement，进而获取到Asset。

核心代码如下：

Var apperanceAssetId＝objMaterial.AppearanceAssetId

Var appearanceAssetElement＝revitDoc.GetElement(apperanceAssetId)asAppearanceAssetElement；

S2-3、生成中间文件XML格式框架：

XML格式框架，如图4所示。XML格式框架的设置的核心代码主要分为以下阶段：

①、规范和初始化参数

PlanarFaceBottomFace＝null；

PlanarFaceSideFace＝null；

double accuracy＝0.4444444445；//精度控制

double PI＝3.14159265359；//π的值

double feet＝304.8；//实现英尺和mm单位的互相转换

int height＝0；//图元的高度

double Area＝0；//底面积

double volum＝0；//体积

string str＝null；//点坐标

string str2＝null；//面坐标；

②、新建XML文档

XmlDocumentxmldoc＝new XmlDocument()；

XmlElementxmllayer；

③、获取Application和Document

UIApplicationuiApp＝revit.Application；

Autodesk.Revit.ApplicationServices.Applicationapp＝uiApp.Application；

UIDocumentuidoc＝uiApp.ActiveUIDocument；

Document doc＝uidoc.Document；

Autodesk.Revit.DB.View view＝uidoc.ActiveView；

④、加入XML的声明和根节点

XmlDeclarationxmldecl；

xmldecl＝xmldoc.CreateXmlDeclaration("1.0","utf-8",null)；

xmldoc.AppendChild(xmldecl)；

XmlElementxmlroot＝xmldoc.CreateElement("project")；

XmlAttributexmlrootType＝xmldoc.CreateAttribute("id")；

xmlrootType.InnerText＝System.Guid.NewGuid().ToString()；

xmlroot.SetAttributeNode(xmlrootType)；

xmlrootType＝xmldoc.CreateAttribute("name")；

xmlrootType.InnerText＝"工程名称"；

xmlroot.SetAttributeNode(xmlrootType)；

xmldoc.AppendChild(xmlroot)；

⑤、通过xmldoc.Save()方法在本地端保存XML；

S3、JavaScript语言解析XML数据文件

S3-1、利用Three.js框架完成三维模型网页端展示的准备工作；

S3-2、完成步骤S3-1准备工作后，调用XML文件载入库loadxmldoc.js；

S3-3、输入存储三维模型的XML文件路径，实现浏览器对XML文件的读取，形成模型信息的节点树；

以南楼一层的体量模型的XML解析为例：

(1)封装库的调用：根据要实现的功能，可以创建所需的JS类库，或者调用Three.js已经封装好的类库。通过设置相对路径，保证类库调用成功。由于Three.js框架中没封装好的XML载入类库，故自行创建XML文件载入库loadxmldoc.js，在主程序中通过

orderDoc＝loadXmlFile("../南一.xml")；

let root＝orderDoc.documentElement；

调用该库实现XML文件加载，并生成节点树；

(2)创建场景：通过在最开始实例化场景对象，创建一个三维空间，相当于设置一个舞台，后续添加的对象都包含在场景中并呈现出来；

(3)创建光源：一般场景中设置多种光源进行组合，比如点光源、平行光及环境光组合，以更好地呈现场景中的模型。核心代码如下：

(4)创建相机：相机的设置直接影响三维模型的视觉效果，通过设置投影类型、坐标、可视角度、视野距离等参数来创建相机；

camera＝new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,

2000000)；

(5)创建模型：场景中可以直接加载Three.js设定好的模型，也可以通过解析不同类型的数据文件，生成符合用户需求的自建模型。本文通过解析XML文件生成三维模型；

(6)创建功能按钮：在场景中可以添加鼠标事件，通过轨迹球方法控制模型旋转、缩放等，然后加入平移、漫游、Home、剪切、查看实体、查看线框等功能按钮；

(7)创建渲染器：将以上对象添加到场景中以后，需要渲染器进行渲染，将三维模型在屏幕上显示出来；

S3-4、浏览器对XML格式文件的解析包括以下步骤：

(1)在JS中声明四个数组，分别命名为Layers、Material、Appearances、Elements，对应XML文件中四个枝节点，每个数组用来存放对应节点下的数据信息；通过调用root.getElementsByTagName().getAttribute()方法，得到每个标签下构件的数据，并循环遍历节点树中四个枝节点下所有子节点，完整获取到模型的几何信息和属性信息，并以Object对象的形式分别存放到上述数组中，后续工作中所需的数据可以直接通过遍历数组的方式获取；

(2)WebGL中三维模型以三角网格(mesh)形式呈现，三角网格生成需要创建几何体和定义材质：在JS中创建几何体对象geometry，geometry有vertices和faces两个属性，通过循环遍历Elements数组中三角面片的顶点坐标数组和面索引数组，获取相应的vertices和faces属性值；

核心代码如下：

调用Vector3()和Face3()两种构造函数，计算顶点法向量和面法向量，完成几何体在浏览器场景中的创建；

核心代码如下：

Revit API实例数据均以字符串类型存储在XML文件中，对获取的三角面片几何信息进行数据类型转换，获得Three.js中几何体生成需要的数值类型数据；

核心代码如下：

var reg＝new RegExp(/[|]/,"g")；

var vvv＝vertex.value.replace(reg,",")；

var varr＝vvv.split(",")；

(3)几何体创建完成后为三角网格(mesh)定义材质：在JS中创建网格材质对象Meshmaterial，其中包含颜色、纹理、光泽度属性，运用THREE.MeshPhongMaterial(color:0x00CED1,opacity:0.9,transparent:true,visible:true)为体量模型赋予材质；

(4)当几何体创建完成并且添加网格材质信息后，调用构造函数new THREE.Mesh(geometry,meshMaterial)在场景中生成网格，即生成所需的三维模型，在场景中可以添加鼠标事件，通过轨迹球方法控制模型旋转、平移、缩放等；还可以添加浏览器性能监测事件，实时显示浏览器渲染帧率。完成Revit体量模型在网页端重建，实现了JavaScript对XML数据文件的解析。

S4、WebGL模型渲染

WebGL模型绘制流程如图6所示，新建HTML文件，将Three.js文件作为外部文件复制到项目目录中，引用相关的库，之后通过编写JavaScript代码对整个项目进行操作：首先创建模型所需要的顶点即对XML进行解析；创建一个几何图形对象，并将顶点传递给几何图形对象；创建模型的纹理对象即材质；通过THREE.Mesh＝function(geometry,material)的第一个参数THREE.Geometry类型的顶点和顶点之间连接关系的对象geometry和第二个定义的材质参数Materia创建网格对象，并将几何图形对象以及纹理对象传递给网格对象；通过scene.add()的方法将网格添加到可容纳网格对象的容器内；

WebGL中最流行的js库Three.js是使用JavaScript语言编写的一款运行在浏览器中的3D引擎，只需要使用JavaScript代码即可创建一个3D场景，为物体的渲染提供多种类型的纹理和材质，而且支持多种格式的3D物体和骨骼动画，可以使3D场景更加丰富。

在开发之初，选择一款合适的浏览器是很重要的，Google Chrome的兼容性是最好的，完全可以满足开发和测试的需要。Firefox、Safri等主流浏览器也支持Three.js。

3D空间内任何形状的物体都称之为模型，无论是立体模型还是平面模型都由至少三个顶点组成，将这些顶点用线连接起来就组成了模型。还需要知道在现在计算机图形学中，所有的模型，无论复杂程度，都是由多个三角形拼接而成的。我们常见的球体看起来很圆滑，其实是由很多个三角形绘制而成，由于密度很高肉眼很难察觉其边缘的顶点。

由于这些模型都是使用线条连接而成，看起来就像一张捕鱼的渔网被扭曲成各种形状，我们称这种没有材质的模型叫做网格模型。在Three.js中用THREE.Mesh来表示网格模型。

本实施例主要运用摄像机、鼠标、键盘对网页端体量模型进行交互控制，分为以下内容：

(1)视点控制

首先，Three.js中将设置投影方式的相关代码封装在摄像机部分的相关代码中，其中正交投影摄像机方法为：var camera＝new THREE.OrthographicCamera(left,right,top,bottom,near,far)；透视投影摄像机的方法为：var camera＝newTHREE.PerspectiveCamera(fov,aspect,near,far)；这里的Camera相当于人的眼睛，从坐标的那个视点去观察目标，相当于投影出立体感。如图7和图8所示，透视摄像机可以营造出人眼真实的感觉，即“近大远小”。除此之外，照相机默认的观察方向是指向z轴负方向(就是朝向屏幕)，所以当变化坐标以后，就要将照相机指向原点，才能观察到物体。这里调用了LookAt()函数即：camera.lookAt(new THREE.Vector3(0,0,0))；

视图变换就是不通过调整模型本身的参数，而是直接控制摄像机、场景的移动而产生的视觉。

(2)鼠标控制

引入一个OrbitControls.js库，核心代码如下：

//添加移动库OrbitControls

var controls＝new THREE.OrbitControls(camera)

//打开键盘默认是上下左右箭头移动

controls.enableKeys＝true；

//旋转速度

controls.rotateSpeed＝4；

//滚轮拉近镜头

controls.minDistance＝1；

//滚轮拉远镜头

controls.maxDistance＝10000；

(3)旋转、缩放、平移变换

Geometry利用Vector3或Color存储了几何体的相关attributes(如顶点位置，面信息，颜色等)比起BufferGeometry更容易读写，代码如下：

var geometry＝new THREE.Geometry()；

geometry.vertices.push(

new THREE.Vector3(-10,10,0),

new THREE.Vector3(-10,-10,0),

new THREE.Vector3(10,-10,0)

)；

旋转、缩放、平移变换均为改变结合体顶点位置坐标数据来实现模型的变换操作。如图9所示，几何体Geometry对象有一系列的顶点属性，也封装了一系列的方法，通过.scale()、.translate()、.rotateX()等方法可以对几何体本身进行缩放、平移、旋转等几何变换。例如本文所研究的网格模型，使模型xyz方向分别缩放0.5,1.5,2倍，所编写的代码为：mesh.scale.set(0.5,1.5,2)。

S5、功能界面

基于WebGL的开源框架，使用Three.js类库，通过JavaScript语言引用HTML5中.css样式文件、.js方法文件、.html代码集文件进行编程，完成建筑信息模型可视化平台搭建。

1.界面设计

界面设计采用CSS前端设计，对界面整体布局以及背景图片进行调整，加入logo和实时时间设置以获取当前时间循环；

2.功能及关键技术简介

从以下7个方面对该系统进行简要说明：

(1)系统首页中可以查看模型的三维状态，可以对模型进行放大缩小移动旋转等操作，也可以实时查看当前时间、实验室使用情况、人员流量统计、主要实验情况；

(2)鼠标单机楼层指引后，可以查看各个楼层的平面图，主要采用Java语言和Three.js技术对体量模型XML的解析，运用Webgl中二维标签和THREE.CSS2DObject渲染器结合的方法创建房间标签文字；通过获取XML文件的entity.name提取到每一个体量模型对应相应的标签文字；通过THREE.Vector3().addVectors(meshBox3.max,meshBox3.min).multiplyScalar(0.5)的方法获取到每个网格的中心点坐标即为标签的坐标；使用CSS前端设计对文字进行调整；由于文字内容长短不一且影响美观，本实施例采用python正则表达式对文字二次调整；核心代码如下：

使用户更加直观的了解到每一个房间的具体房间号和名字；

(3)本发明在数据处理上采用了JSON文件，核心代码如下：

使得每层房间按照建模时标注的房间情况逐一罗列出来；

(4)本发明设计了初步导航按钮，采用当用户点击房间列表中的文字或者导航按钮，均可查看该房间所在位置，且以高亮显示，在数据处理上采用了JSON文件；

(5)本发明的VR系统是基于jquery的弹窗插件layer，引用jquery-1.11.1.min.js核心插件，使用layer的open方法打开弹出层；

360全景就是视角超过人的正常视角的图像，而本发明的全景特指水平视角360度，垂直视角180度的图像。全景实际上只是一种对周围景象以某种几何关系进行映射生成的平面图片。本发明基于Three.js的360×180度全景图预览js插件Photo Sphere Viewer，实现了360度旋转查看全景图，也可以上下180度查看图片，它也可以与触摸屏一起工作。使用该全景图插件时本发明引入three.min.js和photo-sphere-viewer.min.js文件；其次，创建一个空的div来放置全景图，全景图片采用JSON数据格式读取生成；最后，初始化插件：创建一个新的PhotoSphereViewer对象，然后在这个对象中插入一个参数对象，有两个参数是必须设置panorama和container，核心代码如下：

点击vr按钮后，查看该房间对应的实景情况，可对该场景360度旋转查看、可放大缩小查看，也可以选择自由播放；

(6)风险预测

双击左上角平台名称，可对该系统进行刷新，防止用户操作失误造成的错误反应。

进一步地，所述步骤S2进行模型提取之前，先进行程序调试并满足功能等要求：新建工程，添加“GeometryGymIFC”、“RevitAPI”、“RevitUIAPI”引用和使用到的命名空间，创建IExternalCommand接口，使用FilteredElementCollector过滤器获取元素集合并通过提取到的相关数据赋值给XML相应的节点目录，调用Execute函数返回Succeeded提交命令。具体流程如图3所示。

进一步地，所述步骤S3-1中，XML文件结构为节点树状结构，每个节点都有其专属标签(tag)，根据用户需要将不同种类的数据信息存放到不同的节点中用于解析和查询，所述XML文件包括LayerList、MaterialList、ApperanceList和ElementList四个标签，如图5所示。四个标签中分别存储了BIM模型的楼层信息、材质信息，外观信息、几何信息；其中，楼层ID、楼层属性信息存储在楼层节点LayerList中；材质ID、材质名称、材质类别、RGB值存储在材质节点MaterialList中；外观ID、外观名称、外观贴图路径值存储在外观节点ApperanceList中；ElementList当中，几何信息的表达为vertex、face、edge，即点坐标和面索引值；Revit的网格是多边形网格，由顶点以及对应的三角形组成，用于对三维面的表示。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (2)

1.一种基于WebGL+VR的BIM体量模型展示方法，其特征在于包括以下步骤：

S1、体量模型建模；

①、打开Revit2016软件→选择“族”的子菜单“新建概念体量”→选择“公制体量”菜单并打开；

②、打开项目浏览器的“立面”菜单，进入任何一个立面创建标高；

③、打开“视图”选项卡的子菜单“楼层平面”，选中并复制步骤②所创建的标高；

④、进入标高1，选择“创建”选项卡的“参照平面”，为体量模型定位；

⑤、用“模型线”中的“直线”命令，在参照平面上绘制相应的矩形，用快捷键“TR”进行修剪；

⑥、选择步骤⑤绘制的矩形轮廓，按住Ctrl同时选择已经绘制好的轮廓表面，选择“功能区”→“创建形状”→“实心形状”；

⑦、进入三维，修改高度，完成体量模型的创建。

S2、模型提取

通过VisualStudio2019软件添加RevitAPI相关引用，并使用C#语言编译的建筑模型信息提取插件，将Revit软件中3D参数化模型工程信息进行深度提取并以XML文本格式输出；

S3、JavaScript语言解析XML数据文件

S3-1、利用Three.js框架完成三维模型网页端展示的准备工作；

S3-2、完成步骤S3-1准备工作后，调用XML文件载入库loadxmldoc.js；

S3-3、输入存储三维模型的XML文件路径，实现浏览器对XML文件的读取，形成模型信息的节点树；

S3-4、浏览器对XML格式文件的解析包括以下步骤：

(1)在JS中声明四个数组，分别命名为Layers、Material、Appearances、Elements，对应XML文件中四个枝节点，每个数组用来存放对应节点下的数据信息；通过调用root.getElementsByTagName().getAttribute()方法，得到每个标签下构件的数据，并循环遍历节点树中四个枝节点下所有子节点，完整获取到模型的几何信息和属性信息，并以Object对象的形式分别存放到上述数组中，后续工作中所需的数据可以直接通过遍历数组的方式获取；

(2)WebGL中三维模型以三角网格形式呈现，三角网格生成需要创建几何体和定义材质：在JS中创建几何体对象geometry，geometry有vertices和faces两个属性，通过循环遍历Elements数组中三角面片的顶点坐标数组和面索引数组，获取相应的vertices和faces属性值；调用Vector3()和Face3()两种构造函数，计算顶点法向量和面法向量，完成几何体在浏览器场景中的创建；

RevitAPI实例数据均以字符串类型存储在XML文件中，对获取的三角面片几何信息进行数据类型转换，获得Three.js中几何体生成需要的数值类型数据；

(3)几何体创建完成后为三角网格定义材质：在JS中创建网格材质对象Meshmaterial，其中包含颜色、纹理、光泽度属性，运用THREE.MeshPhongMaterial为体量模型赋予材质；

(4)当几何体创建完成并且添加网格材质信息后，调用构造函数new THREE.Mesh(geometry,meshMaterial)在场景中生成网格，即生成所需的三维模型，完成Revit体量模型在网页端重建，实现了JavaScript对XML数据文件的解析；

S4、WebGL模型渲染

新建HTML文件，将Three.js文件作为外部文件复制到项目目录中，引用相关的库，之后通过编写JavaScript代码对整个项目进行操作：首先创建模型所需要的顶点即对XML进行解析；创建一个几何图形对象，并将顶点传递给几何图形对象；创建模型的纹理对象即材质；通过THREE.Mesh＝function(geometry,material)的第一个参数THREE.Geometry类型的顶点和顶点之间连接关系的对象geometry和第二个定义的材质参数Materia创建网格对象，并将几何图形对象以及纹理对象传递给网格对象；通过scene.add()的方法将网格添加到可容纳网格对象的容器内；

S5、功能界面

基于WebGL的开源框架，使用Three.js类库，通过JavaScript语言引用HTML5中.css样式文件、.js方法文件、.html代码集文件进行编程，完成建筑信息模型可视化平台搭建。

进一步地，所述步骤S2进行模型提取之前，先进行程序调试并满足功能等要求：新建工程，添加“GeometryGymIFC”、“RevitAPI”、“RevitUIAPI”引用和使用到的命名空间，创建IExternalCommand接口，使用FilteredElementCollector过滤器获取元素集合并通过提取到的相关数据赋值给XML相应的节点目录，调用Execute函数返回Succeeded提交命令。

2.根据权利要求1所述的一种基于WebGL+VR的BIM体量模型展示方法，其特征在于：所述步骤S3-1中，XML文件结构为节点树状结构，每个节点都有其专属标签，根据用户需要将不同种类的数据信息存放到不同的节点中用于解析和查询，所述XML文件包括LayerList、MaterialList、ApperanceList和ElementList四个标签，四个标签中分别存储了BIM模型的楼层信息、材质信息，外观信息、几何信息；其中，楼层ID、楼层属性信息存储在楼层节点LayerList中；材质ID、材质名称、材质类别、RGB值存储在材质节点MaterialList中；外观ID、外观名称、外观贴图路径值存储在外观节点ApperanceList中；ElementList当中，几何信息的表达为vertex、face、edge，即点坐标和面索引值；Revit的网格是多边形网格，由顶点以及对应的三角形组成，用于对三维面的表示。

Images