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

上期BIMFACE功能测评（一）重点给大家演示了在BIMFACE控制台，模型上传、转换预览以及简单的本地模型展示的全过程。

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

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

那为了让大家可以更好地在实际业务场景中进行二次开发，本期测评就立足与运维场景，帮助大家快速使用这些简单的API，实现更多功能。一张表先总览下BIMFACE适用于运维阶段的接口，以及我自己对应用场景的举例理解：

 

整体来说，根据现有的功能及前后端API来看，至少可以满足90%及以上的功能需求开发了。那接下来我就按照我表格里罗列的功能，展示下实现逻辑，本次主要介绍“构件编辑”功能块。

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

1、构件着色

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

//********************根据Id给构件着色*********************var isOverrideComponentsColorByIdActivated = false;function overrideComponentsColorById() {var color = new Glodon.Web.Graphics.Color("#333333", 0.8);if (!isOverrideComponentsColorByIdActivated) {// 根据Id修改构件颜色及透明度viewer3D.overrideComponentsColorById(["271431"], color);// 根据Id修改构件透明度viewer3D.overrideComponentsOpacityById(["307240"], 0.8);viewer3D.render();} }//********************根据条件给构件着色*********************var isOverrideComponentsColorByDataActivated = false;function overrideComponentsColorByData() {if (!isOverrideComponentsColorByDataActivated) {var color = new Glodon.Web.Graphics.Color("#333333", 0.8);//设置给构件着色的条件viewer3D.overrideComponentsColorByObjectData([{"categoryId": "-2001360"}], color);viewer3D.overrideComponentsOpacityByObjectData([{"levelName": "F2"}], 0.8);viewer3D.render();} }

 

2、构件隐藏

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

//********************根据Id隐藏构件*********************var isHideComponentsByIdActivated = false;function hideComponentsById() {if (!isHideComponentsByIdActivated) {viewer3D.hideComponentsById(["307240", "267327", "307240", "259504", "264857"]);viewer3D.render();} }//********************根据条件隐藏构件*********************var isHideComponentsByDataActivated = false;function hideComponentsByData() {if (!isHideComponentsByDataActivated) {//设置隐藏构件的条件viewer3D.hideComponentsByObjectData([{"levelName": "F2"}]);viewer3D.render();} else {//取消隐藏viewer3D.showComponentsByObjectData([{"levelName": "F2"}]);viewer3D.render();}isHideComponentsByDataActivated = !isHideComponentsByDataActivated;}

3、构件半透明

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

   //********************根据Id半透明构件*********************var isTransparentComponentsByIdActivated = false;function transparentComponentsById() {if (!isTransparentComponentsByIdActivated) {viewer3D.transparentComponentsById(["307240"]);viewer3D.render();} else {//取消半透明viewer3D.opaqueComponentsById(["307240"]);viewer3D.render();}isTransparentComponentsByIdActivated = !isTransparentComponentsByIdActivated;}//********************根据条件半透明构件*********************var isTransparentComponentsByDataActivated = false;function transparentComponentsByData() {if (!isTransparentComponentsByDataActivated) {//设置半透明构件的条件viewer3D.transparentComponentsByObjectData([{"levelName": "F2"}]);viewer3D.render();} isTransparentComponentsByDataActivated = !isTransparentComponentsByDataActivated;}

 

4、构件隔离

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

 //********************根据Id隔离构件*********************function isolateComponentsById() {if (!isIsolateComponentsByIdActivated && !isIsolateComponentsByFileIdActivated && !isIsolateComponentsByDataActivated) {//集成文件的ID应该使用"fileId.ElementId"viewer3D.isolateComponentsById(["4a9a86ef19c948ba847b3647246bd141.9812604"], makeOthersTranslucent);viewer3D.render();isIsolateComponentsByIdActivated = !isIsolateComponentsByIdActivated;} }//********************根据文件Id隔离构件*********************function isolateComponentsByFileId() {if (!isIsolateComponentsByIdActivated && !isIsolateComponentsByFileIdActivated && !isIsolateComponentsByDataActivated) {viewer3D.isolateComponentsByObjectData([{"fileId": "1548026928112320"}], makeOthersTranslucent);viewer3D.render();isIsolateComponentsByFileIdActivated = !isIsolateComponentsByFileIdActivated;}}//********************根据条件隔离构件*********************function isolateComponentsByData() {if (!isIsolateComponentsByIdActivated && !isIsolateComponentsByFileIdActivated && !isIsolateComponentsByDataActivated) {//设置隔离构件的条件viewer3D.isolateComponentsByObjectData([{"levelName": "F2"}], makeOthersTranslucent);viewer3D.render();isIsolateComponentsByDataActivated = !isIsolateComponentsByDataActivated;} }//********************隔离状态下不同构件颜色*********************var isSetIsolatedComponentColorActivated = false;function setColor() {if (!isSetIsolatedComponentColorActivated) {// 设置隔离状态下构件颜色viewer3D.setIsolatedComponentColor(new Glodon.Web.Graphics.Color("#3223A6", 0.4));viewer3D.render();setButtonText("btnSetColor", "恢复颜色");} isSetIsolatedComponentColorActivated = !isSetIsolatedComponentColorActivated;

 

5、冻结构件

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

isComponentsDeactivated = false;function deactivate() {if (!viewAdded) {return;}if (isComponentsDeactivated) {viewer3D.clearOverrideColorComponents();viewer3D.activateAllComponents();viewer3D.render();} else {// 为被冻结的构件着色，以示区分var newColor = new Glodon.Web.Graphics.Color(128, 128, 128, 0.5);viewer3D.overrideComponentsColorById(['267327', '268067'], newColor);// 冻结屋顶的构件viewer3D.deactivateComponentsById(['267327', '268067']);viewer3D.render();setButtonText('btnDeactivate', '恢复构件');}isComponentsDeactivated = !isComponentsDeactivated;}

6、构件闪烁强调

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

 //********************构件闪烁********************* var isBlinkComponentsActivated = false;function setBlinkColor() {if (!isBlinkComponentsActivated) {// 构件闪烁                viewer3D.addBlinkComponentsById(["3813038", "3939364", "4067477"]);viewer3D.setBlinkColor(new Glodon.Web.Graphics.Color("#32D3A6", 0.8));viewer3D.enableBlinkComponents(true);viewer3D.setBlinkIntervalTime(500);viewer3D.render();} isBlinkComponentsActivated = !isBlinkComponentsActivated;}

上述就是本次功能测评—构件编辑功能板块内容，最后也教大家1个方法可以快速学会用这些接口。

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

 

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

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