[发明专利]一种基于Web端的BIM三维建筑模型展示方法

权利要求书

1.一种基于Web端的BIM三维建筑模型展示方法，其特征在于包括以下步骤：

S1、利用Revit软件建立三维建筑模型：通过Revit API封装的过滤器将三维模型的几何信息和属性信息提取出来，并以XML数据格式存储；

S2、网页端三维建筑模型的构建

S21、使用Three.js框架进行三维建筑模型的网页端重建及展示，包括以下步骤：

（1）封装库的调用：根据要实现的功能，创建所需的JS类库，或者调用Three.js已经封装好的类库，通过设置相应路径，保证类库调用成功；

（2）创建场景：在最开始实例化场景对象，创建一个三维空间，后续添加的对象都包含在场景中并呈现出来；

（3）创建光源：一般场景中设置多种光源进行组合；

（4）创建相机：通过设置投影类型、坐标、可视角度、视野距离的参数从而创建相机；

（5）创建模型：场景中直接加载Three.js设定好的模型，或者通过解析不同类型的数据文件，生成符合用户需求的自建模型；

（6）创建渲染器：将以上所述（1）~（5）五个对象添加到场景中以后，采用渲染器进行渲染，将三维模型在屏幕上显示出来；

S22、将步骤S1构建的Revit三维模型的信息存储到XML文件中，所述XML文件有四个枝节点：三维模型的楼层信息存放在楼层数组中，材质及外观贴图信息存放在材质数组、外观数组中，几何信息存放在XML文件的元素数组中，在Three.js框架下用JavaScript语言对XML文件进行解析，包括以下步骤：

（1）创建XML文件载入库loadxmldoc.js，在主程序中调用该库实现XML文件加载，并生成节点树；

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

（3）浏览器场景中创建几何体和定义材质：

创建几何体：在JS中创建几何体对象，几何体对象有顶点坐标和面索引两个属性，通过循环遍历元素数组中三角面片的顶点坐标数组和面索引数组，获取相应的顶点坐标和面索引值，调用Vector3()和Face3()两种构造函数，计算顶点法向量和面法向量，完成几何体在浏览器场景中的创建；

定义材质：在JS中创建网格材质对象；

①、遍历材质数组中的颜色对象，获取模型颜色信息RGB值，通过构造函数rgb(r,g,b)给模型着色；

②、遍历外观数组中外观贴图对象获取纹理图片，通过构造函数newTHREE.TextureLoader().load('js/xxx.jpg')即可为模型贴图，但是为了保证WebGL模型纹理与原模型纹理一致，需要用纹理映射的方法将图片准确放置在对应位置；

③、通过遍历元素数组中UVs对象，获取数据并生成纹理坐标，按照面索引序列关联三角面片顶点坐标，将纹理坐标传递给三角面纹理属性，实现模型准确贴图；

④、通过遍历查询和调用方法获取模型其他属性信息，完成对三角网格材质信息的添加；

（4）当几何体创建完成并且添加网格材质信息后，调用构造函数newTHREE.Mesh(geometry,meshMaterial )，在场景中生成网格，即生成所需的三维模型；

S3、三维建筑模型属性信息关联及交互操作

采用射线交互鼠标单击显示具体构件信息的方法，首先，在元素数组保存了构件的唯一ID和materialID，将materialID属性值与Material数组中材质ID进行字段匹配，获取该构件的材质信息；然后，利用该构件对应材质中的appearanceid属性值关联外观数组，获取该构件的外观信息，实现构件的属性信息关联；

S4、利用光线投射类在场景中创建射线，通过计算鼠标实时点击位置和当前相机矩阵生成一条与三维模型相交的射线，当射线与第一个构件相交时触发事件使其高亮并展示构件属性信息，实现在浏览器中实时查看具体构件详细属性的功能。