C # Development BIMFACE Series 39 Webpage Integration Development 3: Comparison of 3D Models in Image Examination System

  In the building construction drawing review system, the design unit submits the designed model / drawing and the review expert reviews the model / drawing. If any place that does not comply with the specification is found during the review process, the process is returned to the design unit, and the design unit personnel readjust the design according to the review opinions, and submit it to the review expert again after the adjustment is completed. At this time, in order to facilitate expert review, you need to know what changes have occurred between the current round of models / drawings and the previous round of models / drawings, and you can review the changes.

First look at the effect

 

The effect is as shown above. On the left is the model of the current review round, in the middle is the model of the previous round, and on the right is the list of transactions resulting from the comparison of the two models.

(1) Click on the component in " New Construction " to automatically locate the new target component in the current round. The moving member is indicated in light green. The two model perspectives move synchronously.

 

(2) Click on the component in " Delete Construction " to automatically locate the target component in the previous round. The component in this round is deleted, so it is not displayed. The moving member is indicated in light green. The two model perspectives move synchronously.

 (3) Click on the component in " Modify Build " to automatically locate the modified component in the current round and the corresponding component in the previous round. The moving member is indicated in light green. The two model perspectives move synchronously.

 

Before BIMFACE, there was no function of 3D model linkage comparison. After I communicated with the beautiful lady of BIMFACE's technical support team, they incorporated my requirements into their product requirements. This function is realized. Hereby thank all the small partners of the BIMFACE team, thank you for your trust and acceptance of the developers, thank you for your hard work.

The grace of dripping water, when Yongquan reports, dedicate his personal BIMFace C # version SDK open source project.

Open source address: https://gitee.com/NAlps/BIMFace.SDK

Author: Zhang Zhuanning QQ: 905442693 micro letter: savionzhang

Welcome to download, use, communicate and share.

The following describes the principle and implementation of the comparison function of the BIMFACE model.

  Model comparison can analyze the difference between two files / models to determine the geometric and attribute differences between the two files / models, including added components, deleted components, and modified components. Model correspondence can be used to compare file / model versions.

Special note: The model comparison is done in the BIMFACE cloud, usually takes 5 to 10 minutes. When the model comparison is completed, BIMFACE can notify the comparison result.

Precondition
  • You only need to upload the pre-modified and modified models to the cloud and convert them before you can initiate a model comparison;
  • Currently only supports model comparison of .rvt single files.
The basic steps
  1. Initiate model comparison through the server API (compare the fileId of the model file before and after);
  2. Wait for the cloud comparison task to execute;
  3. After the comparison is completed, the difference model is displayed on the webpage by calling JavaScript API;
  4. In addition to displaying the difference model, you also need to call the server API to obtain the comparison results (including the list of new, deleted, and modified components).
Comparison process

  After the model file is converted in the cloud, a data package defined by BIMFACE is generated. Therefore, to compare two model files, you actually need to compare the data packets of the two files. As shown in the figure below, file B is the modified version of file A. After the comparison is complete, the results include two parts:

  • Geometric difference
  • Change components and attributes.

 

BIMFACE provides a server-side API for initiating comparisons, obtaining comparison status, and obtaining comparison results. Please refer to my blog:

 

After calling the server-side API to obtain the comparison result, the front-end needs to use JS to achieve the synchronous linkage effect, and automatically click to the perspective of the component where the component is clicked.

1  // Synchronize the translation and rotation of the old and new models
 2  function correspond () {
 3      latestViewer = latest.getViewer ();
 4      var state, focus;
 5  
6      prevViewer = prev.getViewer ();
 7      view1Bind = function (data) {
 8          // Update the old model state with the new model state
 9          var latestState = latestViewer.getCurrentState ();
 10          prev.setState (latestState);
 11          prev.getViewer (). Camera.up.copy (latestViewer.getViewer (). Camera .up);
 12      }
 13  
14      view2Bind = function (data) {
 15          // Update the state of the new model with the state of the old model
 16         var prevState = prev.getCurrentState ();
 17          latestViewer.setState (prevState);
 18          latestViewer.getViewer (). camera.up.copy (prev.getViewer (). camera.up);
 19      }
 20  
21      // Consider dead The effect of the loop cannot monitor the render event at the same time, so the monitoring of the model where the mouse is located is the main
 22      document.querySelector ('# container'). AddEventListener ('mousemove',
 23          function (e) {
 24              if (focus == undefined ) {
 25                  var width = document.querySelector ('. Latest'). OffsetWidth;
 26                  if (e.clientX> width) {
 27                      focus = 1;
 28                     latestViewer.removeEventListener('Rendered', view1Bind);
29                     prev.addEventListener('Rendered', view2Bind);
30                 } else {
31                     focus = 0;
32                     prev.removeEventListener('Rendered', view2Bind);
33                     latestViewer.addEventListener('Rendered', view1Bind);
34                 }
35             }
36         });
37 
38     view1.addEventListener('mouseover',
39         function (e) {
40             if (focus == 0) {
41                 return;
 42              }
 43              focus = 0;
 44              // Unbind and rebind events, synchronize Rendered 45  old and new models
             prev.removeEventListener ('Rendered', view2Bind);
 46              latestViewer.addEventListener ('Rendered', view1Bind);
 47          });
 48  
49      view2.addEventListener ('mouseover',
 50          function () {
 51              if (focus == 1) {
 52                  return;
 53              }
 54              focus = 1;
 55              // Unbind and rebind events, synchronize old and new Model Rendered
 56             latestViewer.removeEventListener('Rendered', view1Bind);
57             prev.addEventListener('Rendered', view2Bind);
58         });
59 
60     // 同步新旧模型的Hover事件
61     prev.addEventListener('ComponentsHoverChanged',
62         function (e) {
63             latestViewer.getViewer().modelManager.sceneState.setHoverId(e.objectId);
64         });
65 
66     latestViewer.addEventListener('ComponentsHoverChanged',
67         function (e) {
68             prev.getViewer().modelManager.sceneState.setHoverId(e.objectId);
69         });
70 
71     var ViewerEvent = Glodon.Bimface.Viewer.Viewer3D;
72     latestViewer.setCameraAnimation(false);
73     prev.setCameraAnimation(false);
74 }
1  // Create click event of change list and widget
 2  function createDom (result) {
 3          // Set UI of widget difference widget tree
 4          var newItems = result.newItems,
 5              deleteItems = result.deleteItems,
 6              changeItems = result.changeItems;
 7          var typeBoxs = document.querySelectorAll ('. Type-box');
 8          typeBoxs [0] .innerHTML =
 9              ` < div class =" title " > < i class =" icon arrow " > </ i > < i class = "icon-type new" > </i>新增构件(${newItems.length})</div>
10                                       <ul id="addElement" class="type-ul">${createDomNode(newItems)}</ul>`;
11 
12         // 删除构件列表
13         typeBoxs[1].innerHTML =
14             `<div class="title"><i class="icon arrow"></i><i class="icon-type remove"></i></Delete widget ($ {deleteItems.length})div>
15                                       <ul id="removeElement" class="type-ul">${createDomNode(deleteItems)}</ul>`;
16 
17         // 修改构件列表
18         typeBoxs[2].innerHTML =
19             `<div class="title"><i class="icon arrow"></i><i class="icon-type revise"></i>修改构件(${changeItems.length})</div>
20                                       <ul id="reviseElement" class="type-ul">${createDomNode(changeItems)}</ul>`;
21 
22         // 差异构件树列表
23         document.querySelector('.compare-content').addEventListener('click',
24             function (e) {
25                 var element = e.target;
26                 if (element.tagName == 'I' && element.hasClass('arrow')) {
27                     if (element.hasClass('close')) {
28                         element.removeClass('close');
29                         element.parentElement.nextElementSibling.removeClass('close');
30                     } else {
31                         element.addClass('close');
32                         element.parentElement.nextElementSibling.addClass('close');
33                     }
34                 } else if (element.tagName == 'SPAN' && element.getAttribute('type')) {
35                     var type = element.getAttribute('type'),
36                         id = element.parentElement.getAttribute('data-oid');
37                     if (type == 'NEW') {
38                         latestViewer.setSelectedComponentsById ([id]); // Highlight selected component
 39                          latestViewer.zoomToSelectedComponents (); // Position
 40                          view1Bind ();
 41                      } else if (type == 'DELETE') {
 42                          prev.setSelectedComponentsById ([id ]); // Highlight selected components
 43                          prev.zoomToSelectedComponents (); // Position
 44                          view2Bind ();
 45                      } else {
 46                          latestViewer.setSelectedComponentsById ([id]); // Highlight selected components
 47                          latestViewer.zoomToSelectedComponents () ; // Positioning;
48                         view1Bind();
49                         prev.setSelectedComponentsById([id]);
50                     }
51                 }
52             });
53     }

Guess you like

Origin www.cnblogs.com/SavionZhang/p/12396130.html