上期BIMFACE 功能测评（一）主要给大家介绍了通过 BIMFACE 控制台，实现模型上传、转换预览以及简单的本地模型展示的全过程。

本地加载模型 / 图纸是最基础的入门操作，如果想要转换之后的模型产生更多的价值，就需要我们基于业务需求，进行深度二次开发。

BIMFACE 定位是一款面向建筑业软件开发者的平台工具，提供了丰富的二次接口，可应用于设计、施工、运维乃至全生命周期的开发工作。特地去官网瞄了一眼案例介绍，类似奥雅纳、古河云等面向运维业务的效果感觉都挺不错。

为了让大家可以更好地在实际业务场景中进行二次开发，本期测评就立足与运维场景，希望可以帮助有需要的伙伴们快速上手。一张表先一起看看 BIMFACE 适用于运维阶段的主要接口，以及我自己对应用场景的举例理解：

BIM轻量化引擎—BIMFACE功能测评（二） - 图1

根据现有的功能及前后端 API 来看，BIMFACE 至少可以满足 90% 及以上的功能需求开发了。接下来我就按照表格罗列的功能，逐一展示下实现逻辑（代码），本次主要围绕 “构件编辑” 功能板块。

“构件编辑” 是三维可视化应用的基础，建筑物作为一个非常复杂的集合体，包含的构件数量十分庞杂，在运维管理过程中，我们为了定位到重要设备的位置，突出显示关注的构件，需要对模型及构件的显示进行一系列操作。

1、构件着色

BIMFACE 提供 2 类构件着色的接口，分别是按照 ID 和条件给构件着色。

  1.   //********************根据Id给构件着色*********************
  2.     var isOverrideComponentsColorByIdActivated = false;
  3.     function overrideComponentsColorById() {
  4.       var color = new Glodon.Web.Graphics.Color("#333333", 0.8);
  5.       if (!isOverrideComponentsColorByIdActivated) {
  6.         // 根据Id修改构件颜色及透明度
  7.         viewer3D.overrideComponentsColorById(["271431"], color);
  8.         // 根据Id修改构件透明度
  9.         viewer3D.overrideComponentsOpacityById(["307240"], 0.8);
  10.         viewer3D.render();
  11.       } 
  12.     }
  14.   //********************根据条件给构件着色*********************
  15.     var isOverrideComponentsColorByDataActivated = false;
  16.     function overrideComponentsColorByData() {
  17.       if (!isOverrideComponentsColorByDataActivated) {
  18.         var color = new Glodon.Web.Graphics.Color("#333333", 0.8);
  19.         //设置给构件着色的条件
  20.         viewer3D.overrideComponentsColorByObjectData([{
  21.           "categoryId": "-2001360"
  22.         }], color);
  23.         viewer3D.overrideComponentsOpacityByObjectData([{
  24.             "levelName": "F2"
  25.         }], 0.8);
  26.         viewer3D.render();
  27.       } 
  28.     }

2、构件隐藏

BIMFACE 提供 2 类构件隐藏的接口，分别是按照 ID 和条件隐藏构件。

  1.  //********************根据Id隐藏构件*********************
  2.     var isHideComponentsByIdActivated = false;
  3.     function hideComponentsById() {
  4.       if (!isHideComponentsByIdActivated) {
  5.         viewer3D.hideComponentsById(["307240", "267327", "307240", "259504", "264857"]);
  6.         viewer3D.render();
  7.       } 
  8.     }
  10.     //********************根据条件隐藏构件*********************
  11.     var isHideComponentsByDataActivated = false;
  12.     function hideComponentsByData() {
  13.       if (!isHideComponentsByDataActivated) {
  14.         //设置隐藏构件的条件
  15.         viewer3D.hideComponentsByObjectData([{
  16.           "levelName": "F2"
  17.         }]);
  18.         viewer3D.render();
  19.       } else {
  20.         //取消隐藏
  21.         viewer3D.showComponentsByObjectData([{
  22.           "levelName": "F2"
  23.         }]);
  24.         viewer3D.render();
  25.       }
  26.       isHideComponentsByDataActivated = !isHideComponentsByDataActivated;
  27.     }

3、构件半透明

BIMFACE 提供 2 类构件半透明的接口，分别是按照 ID 和条件半透明构件。

  1.    //********************根据Id半透明构件*********************
  2.     var isTransparentComponentsByIdActivated = false;
  3.     function transparentComponentsById() {
  4.       if (!isTransparentComponentsByIdActivated) {
  5.         viewer3D.transparentComponentsById(["307240"]);
  6.         viewer3D.render();
  7.       } else {
  8.         //取消半透明
  9.         viewer3D.opaqueComponentsById(["307240"]);
  10.         viewer3D.render();
  11.       }
  12.       isTransparentComponentsByIdActivated = !isTransparentComponentsByIdActivated;
  13.     }
  15.     //********************根据条件半透明构件*********************
  16.     var isTransparentComponentsByDataActivated = false;
  17.     function transparentComponentsByData() {
  18.       if (!isTransparentComponentsByDataActivated) {
  19.         //设置半透明构件的条件
  20.         viewer3D.transparentComponentsByObjectData([{
  21.           "levelName": "F2"
  22.         }]);
  23.         viewer3D.render();
  24.       } 
  25.       isTransparentComponentsByDataActivated = !isTransparentComponentsByDataActivated;
  26.     }

4、构件隔离

BIMFACE 提供 3 类构件着色的接口，分别是按照 ID、条件、fileID（针对集成文件）隔离构件。（备注：隔离是指除了指定构件，其他构件无法进行选中等操作）

  1.  //********************根据Id隔离构件*********************
  2.     function isolateComponentsById() {
  3.       if (!isIsolateComponentsByIdActivated && !isIsolateComponentsByFileIdActivated && !
  4.         isIsolateComponentsByDataActivated) {
  5.         //集成文件的ID应该使用"fileId.ElementId"
  6.         viewer3D.isolateComponentsById([
  7.           "4a9a86ef19c948ba847b3647246bd141.9812604"
  8.         ], makeOthersTranslucent);
  9.         viewer3D.render();
  10.         isIsolateComponentsByIdActivated = !isIsolateComponentsByIdActivated;
  11.       } 
  12.     }
  14.     //********************根据文件Id隔离构件*********************
  15.     function isolateComponentsByFileId() {
  16.       if (!isIsolateComponentsByIdActivated && !isIsolateComponentsByFileIdActivated && !
  17.         isIsolateComponentsByDataActivated) {
  18.         viewer3D.isolateComponentsByObjectData([{
  19.             "fileId": "1548026928112320"
  20.           }
  21.         ], makeOthersTranslucent);
  22.         viewer3D.render();
  23.         isIsolateComponentsByFileIdActivated = !isIsolateComponentsByFileIdActivated;
  24.       }
  25.     }
  27.     //********************根据条件隔离构件*********************
  28.     function isolateComponentsByData() {
  29.       if (!isIsolateComponentsByIdActivated && !isIsolateComponentsByFileIdActivated && !
  30.         isIsolateComponentsByDataActivated) {
  31.         //设置隔离构件的条件
  32.         viewer3D.isolateComponentsByObjectData([{
  33.           "levelName": "F2"
  34.         }], makeOthersTranslucent);
  35.         viewer3D.render();
  36.         isIsolateComponentsByDataActivated = !isIsolateComponentsByDataActivated;
  37.       } 
  38.     }
  40.      //********************隔离状态下不同构件颜色*********************
  41.       var isSetIsolatedComponentColorActivated = false;
  42.       function setColor() {
  43.             if (!isSetIsolatedComponentColorActivated) {
  44.                 // 设置隔离状态下构件颜色
  45.                 viewer3D.setIsolatedComponentColor(new Glodon.Web.Graphics.Color("#3223A6", 0.4));
  46.                 viewer3D.render();
  47.                 setButtonText("btnSetColor", "恢复颜色");
  48.             } 
  49.             isSetIsolatedComponentColorActivated = !isSetIsolatedComponentColorActivated;
  50.         }

5、冻结构件

与构件隔离不同，冻结是指针对指定构件进行冻结，其他构件可以进行选中等操作。

  1. isComponentsDeactivated = false;
  2.     function deactivate() {
  3.       if (!viewAdded) {
  4.         return;
  5.       }
  7.       if (isComponentsDeactivated) {
  8.         viewer3D.clearOverrideColorComponents();
  9.         viewer3D.activateAllComponents();
  10.         viewer3D.render();
  11.       } else {
  12.         // 为被冻结的构件着色，以示区分
  13.         var newColor = new Glodon.Web.Graphics.Color(128, 128, 128, 0.5);
  14.         viewer3D.overrideComponentsColorById(['267327', '268067'], newColor);
  15.         // 冻结屋顶的构件
  16.         viewer3D.deactivateComponentsById(['267327', '268067']);
  17.         viewer3D.render();
  18.         setButtonText('btnDeactivate', '恢复构件');
  19.       }
  20.       isComponentsDeactivated = !isComponentsDeactivated;
  21.     }

6、构件闪烁强调

设备状态跟踪是运维平台核心的功能，一旦设备发生故障，第一时间获取发生故障的设备信息是十分关键的。

  1.      //********************构件闪烁********************* 
  2.       var isBlinkComponentsActivated = false;
  3.       function setBlinkColor() {
  4.             if (!isBlinkComponentsActivated) {
  5.                 // 构件闪烁                
  6.                 viewer3D.addBlinkComponentsById(["3813038", "3939364", "4067477"]);
  7.                 viewer3D.setBlinkColor(new Glodon.Web.Graphics.Color("#32D3A6", 0.8));
  8.                 viewer3D.enableBlinkComponents(true);
  9.                 viewer3D.setBlinkIntervalTime(500);
  10.                 viewer3D.render();
  11.             } 
  12.             isBlinkComponentsActivated = !isBlinkComponentsActivated;
  13.         }

上述就是本次功能测评 “构件编辑” 板块内容，最后也教大家 1 个方法，作为零代码基础的我最开始就是这样学着调用的接口。

以 “构件闪烁强调” 接口为例，首先找到对应方法“addBlinkComponentsById”，然后打开 BIMFACE 的JavaScript API 文档，Crtl+F 搜索到对应的方法，如图：

BIM轻量化引擎—BIMFACE功能测评（二） - 图2

如图，就可以看到详细的方法介绍，参数类型及描述，这是我自己在学习的过程中，感觉比较实用快捷的方法。作为新手小白刚上手直接看成段的代码还是挺有难度的，希望这种方法可以帮助大家快速上手，慢慢积累，争取高效开发出自己想要业务场景。

后面几期文章，我会按照表格上的内容持续更新。第一次做这样的学习输出，有疑问、建议或者想法，欢迎随时私信联系。共同学习，一起成长！
https://zhuanlan.zhihu.com/p/152130354