C#开发BIMFACE系列39 网页集成开发3：审图系统中三维模型比对

系列目录     【已更新最新开发文章，点击查看详细】

　　在建筑施工图审查系统中，设计单位提交设计完成的模型/图纸，审查专家审查模型/图纸。审查过程中如果发现不符合规范的地方，则流程退回到设计单位，设计单位人员根据审查意见重新调整设计，调整完成后再次提交到审查专家。此时为了便于专家审查，需要知道当前轮次的模型/图纸与上一轮次的模型/图纸发生了哪些异动，针对异动情况进行审查即可。

先看个效果

效果如上图。左侧是当前审查轮次的模型，中间是上一轮次的模型，右侧是2个模型的对比产生的异动列表。

（1）点击“新增构建”中的构件，自动定位到当前轮次中新增的目标构件。异动构件以浅绿色表示。2个模型视角同步移动。

（2）点击“删除构建”中的构件，自动定位到上一轮次中的目标构件，本轮次中的构件被删除，所以不显示。异动构件以浅绿色表示。2个模型视角同步移动。

（3）点击“修改构建”中的构件，自动定位到当前轮次中修改的构件以及上一轮次对应的构件。异动构件以浅绿色表示。2个模型视角同步移动。

BIMFACE之前是没有三维模型联动对比的功能，在我和BIMFACE的技术支持团队的美丽小姐姐沟通后，他们把我的要求纳入了他们产品的需求，经过工程师们加班加点的辛苦付出，很快就实现了该功能。特此感谢BIMFACE团队的所有小伙伴，感谢你们对开发者的信任与接受，感谢你们的辛苦付出。

滴水之恩，当涌泉相报，奉献上个人的BIMFace C#版SDK开源项目。

开源地址：https://gitee.com/NAlps/BIMFace.SDK

作者：张传宁 QQ：905442693 微信：savionzhang

欢迎下载使用，交流、分享。

下面介绍BIMFACE模型对比功能的原理与实现。

　　模型对比可以对两个文件/模型进行差异性分析，确定两个文件/模型之间构件的几何和属性差异，包括增加的构件、删除的构件和修改的构件。 模型对应可以用于进行文件/模型的版本对比。

特别说明：模型对比是在BIMFACE云端进行的，通常需要5~10分钟。当模型对比完成后，BIMFACE能通知对比结果。

前置条件

• 您需要将修改前和修改后的模型上传到云端并转换成功以后才能发起模型对比；
• 目前仅支持.rvt单文件的模型对比。

基本步骤

1. 通过服务端API发起模型对比（对比前后模型文件的fileId）；
2. 等待云端对比任务执行；
3. 对比完成后，在网页端通过调用JavaScript API实现差异模型的显示；
4. 除了显示差异模型，还需要调用服务端API获取对比结果（包括新增、删除、修改的构件列表）。

对比流程

　　模型文件经过云端转换后，生成了BIMFACE定义的数据包。因此，要对比两个模型文件，实际上需要对比两个文件的数据包。如下图所示，文件B是文件A修改后的版本，对比完成之后，其结果包括两个部分：

• 几何差异；
• 变更构件及属性。

BIMFACE提供了服务端API，用于发起对比，获取对比状态、获取对比结果。请参考我的博客：

C#开发BIMFACE系列30 服务端API之模型对比1：发起模型对比

C#开发BIMFACE系列31 服务端API之模型对比2：获取模型对比状态

C#开发BIMFACE系列32 服务端API之模型对比3：批量获取模型对比状态

C#开发BIMFACE系列33 服务端API之模型对比4：获取模型对比结果

C#开发BIMFACE系列34 服务端API之模型对比5：获取模型构建对比差异

调用服务器端的API获取对比结果后，前端需要使用JS来实现同步联动效果，以及点击异动构件后自动定位到构件所在的视角。

 // 同步新旧模型的平移和旋转操作
 function correspond() {
     latestViewer = latest.getViewer();
     var state, focus;

     prevViewer = prev.getViewer();
     view1Bind = function (data) {
         //用新模型的状态更新旧模型状态
         var latestState = latestViewer.getCurrentState();
         prev.setState(latestState);
         prev.getViewer().camera.up.copy(latestViewer.getViewer().camera.up);
     }

     view2Bind = function (data) {
         //用旧模型的状态更新新模型状态
         var prevState = prev.getCurrentState();
         latestViewer.setState(prevState);
         latestViewer.getViewer().camera.up.copy(prev.getViewer().camera.up);
     }

     //考虑到死循环的影响，不能同时监听render事件，因此以鼠标所在位置模型的监听为主
     document.querySelector('#container').addEventListener('mousemove',
         function (e) {
             if (focus == undefined) {
                 var width = document.querySelector('.latest').offsetWidth;
                 if (e.clientX > width) {
                     focus = 1;
                     latestViewer.removeEventListener('Rendered', view1Bind);
                     prev.addEventListener('Rendered', view2Bind);
                 } else {
                     focus = 0;
                     prev.removeEventListener('Rendered', view2Bind);
                     latestViewer.addEventListener('Rendered', view1Bind);
                 }
             }
         });

     view1.addEventListener('mouseover',
         function (e) {
             if (focus == 0) {
                 return;
             }
             focus = 0;
             // 解绑与重新绑定事件，同步新旧模型的Rendered
             prev.removeEventListener('Rendered', view2Bind);
             latestViewer.addEventListener('Rendered', view1Bind);
         });

     view2.addEventListener('mouseover',
         function () {
             if (focus == 1) {
                 return;
             }
             focus = 1;
             // 解绑与重新绑定事件，同步新旧模型的Rendered
             latestViewer.removeEventListener('Rendered', view1Bind);
             prev.addEventListener('Rendered', view2Bind);
         });

     // 同步新旧模型的Hover事件
     prev.addEventListener('ComponentsHoverChanged',
         function (e) {
             latestViewer.getViewer().modelManager.sceneState.setHoverId(e.objectId);
         });

     latestViewer.addEventListener('ComponentsHoverChanged',
         function (e) {
             prev.getViewer().modelManager.sceneState.setHoverId(e.objectId);
         });

     var ViewerEvent = Glodon.Bimface.Viewer.Viewer3D;
     latestViewer.setCameraAnimation(false);
     prev.setCameraAnimation(false);
 }

 //创建异动列表与构件的click事件
 function createDom(result) {
         // 设置构件差异构件树的UI
         var newItems = result.newItems,
             deleteItems = result.deleteItems,
             changeItems = result.changeItems;
         var typeBoxs = document.querySelectorAll('.type-box');
         typeBoxs[0].innerHTML =
             `<div class="title"><i class="icon arrow"></i><i class="icon-type new"></i>新增构件（${newItems.length}）</div>
                                       <ul id="addElement" class="type-ul">${createDomNode(newItems)}</ul>`;

         // 删除构件列表
         typeBoxs[1].innerHTML =
             `<div class="title"><i class="icon arrow"></i><i class="icon-type remove"></i>删除构件（${deleteItems.length}）</div>
                                       <ul id="removeElement" class="type-ul">${createDomNode(deleteItems)}</ul>`;

         // 修改构件列表
         typeBoxs[2].innerHTML =
             `<div class="title"><i class="icon arrow"></i><i class="icon-type revise"></i>修改构件（${changeItems.length}）</div>
                                       <ul id="reviseElement" class="type-ul">${createDomNode(changeItems)}</ul>`;

         // 差异构件树列表
         document.querySelector('.compare-content').addEventListener('click',
             function (e) {
                 var element = e.target;
                 if (element.tagName == 'I' && element.hasClass('arrow')) {
                     if (element.hasClass('close')) {
                         element.removeClass('close');
                         element.parentElement.nextElementSibling.removeClass('close');
                     } else {
                         element.addClass('close');
                         element.parentElement.nextElementSibling.addClass('close');
                     }
                 } else if (element.tagName == 'SPAN' && element.getAttribute('type')) {
                     var type = element.getAttribute('type'),
                         id = element.parentElement.getAttribute('data-oid');
                     if (type == 'NEW') {
                         latestViewer.setSelectedComponentsById([id]);// 高亮选中构件
                         latestViewer.zoomToSelectedComponents();  // 定位
                         view1Bind();
                     } else if (type == 'DELETE') {
                         prev.setSelectedComponentsById([id]);// 高亮选中构件
                         prev.zoomToSelectedComponents(); // 定位
                         view2Bind();
                     } else {
                         latestViewer.setSelectedComponentsById([id]); // 高亮选中构件
                         latestViewer.zoomToSelectedComponents();// 定位;
                         view1Bind();
                         prev.setSelectedComponentsById([id]);
                     }
                 }
             });
     }

系列目录     【已更新最新开发文章，点击查看详细】