# 构件状态编辑

对于模型构件的浏览是三维可视化应用中最基础的能力。

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

# 教程内容

你的模型已经加载成功了，接下来我们需要：

只显示F2楼层的构件，其他构件半透明处理
定位到某个指定构件
关注的构件着色显示

# 构件编辑

# 1. 构件隔离

为了更清晰地显示F2楼层内的构件，我们需要对构件进行隔离操作。

在BIMFACE中，对构件进行隔离后，其余构件可以有如下两种显示模式:

隐藏：其余构件被隐藏
隔离：其余构件被半透明处理，此时半透明的构件无法被选中

首先我们要在页面中添加一个按钮，用来控制构件的隔离和取消隔离。在class为buttons的div下输入如下内容：

<button class="button" id="btnIsolation" onclick="isolateComponents()">构件隔离</button>

然后我们对按钮的样式进行定义，在之后的教程中我们还会创建更多的按钮，但样式都通过这段css代码来保持一致。

.button {
  margin: 5px 0 5px 5px;
  width: 90px;
  height: 30px;
  border-radius: 3px;
  border: none;
  background: #11DAB7;
  color: #FFFFFF;
}

接下来，我们开始调用BIMFACE JSAPI来自定义构件隔离的功能。在script标签内构造一个函数：

// ************************** 隔离 **************************
function isolateComponents() {
  // 设置隔离选项，指定其他构件为半透明状态
  let makeOthersTranslucent = Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent;
  // 调用viewer3D.method，隔离楼层为"F2"的构件
  viewer3D.getModel().isolateComponentsByObjectData([{"levelName":"F2"}], makeOthersTranslucent);
  // 渲染三维模型
  viewer3D.render();
}

加载页面并点击构件隔离的按钮，我们已经能看到归属于F2楼层的构件已经被隔离显示了。

但这似乎还并没有完全达到我们的要求，我们需要一个额外的功能将构件恢复到之前未被隔离的状态。所以我们要对刚才写的代码进行一些小改造。

// ************************** 隔离 **************************
let isIsolationActivated = false;
function isolateComponents() {
  if (!isIsolationActivated) {
    // 设置隔离选项，指定其他构件为半透明状态
    let makeOthersTranslucent = Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent;
    // 调用viewer3D.method，隔离楼层为"F2"的构件
    viewer3D.getModel().isolateComponentsByObjectData([{"levelName":"F2"}], makeOthersTranslucent);
    // 渲染三维模型
    viewer3D.render(); 
    // 修改按钮的文字内容
    setButtonText("btnIsolation", "取消隔离");
  } else {
    // 清除隔离
    viewer3D.getModel().clearIsolation();
    // 渲染三维模型
    viewer3D.render();
    // 修改按钮的文字内容
    setButtonText("btnIsolation", "构件隔离");
  }
  isIsolationActivated = !isIsolationActivated;
}

另外，我们要有一个控制按钮文字内容的函数

// ************************** 按钮文字 **************************
function setButtonText(btnId, text) {
  let dom = document.getElementById(btnId);
  if (dom != null && dom.nodeName == "BUTTON") {
    dom.innerText = text;
  }
}

再次加载页面，我们就可以对构件进行隔离和取消隔离的操作了。

构件隔离图

更多关于按条件筛选构件的方法，可参考条件筛选 (opens new window)部分。

更多关于构件隔离的功能，可参考示例Demo中的以下内容：

构件隔离 (opens new window)

# 2. 构件定位

在定位之前，需要获得指定构件的id。教程中我们选择车库上方的屋顶作为想要关注的构件，其id为"271431"。

与构件隔离相似，我们先添加一个按钮：

<button class="button" id="btnZoomToSelection" onclick="zoomToSelectedComponents()">构件定位</button>

然后在script标签内构造函数：

// ************************** 定位 **************************
let isZoomToSelectionActivated = false;
function zoomToSelectedComponents(){
  if (!isZoomToSelectionActivated) {
    // 选中id为"271431"的构件
    viewer3D.getModel().addSelectedComponentsById(["271431"]);
    // 定位到选中的构件
    viewer3D.zoomToSelectedComponents();
    // 清除构件选中状态
    viewer3D.getModel().clearSelectedComponents();
    setButtonText("btnZoomToSelection", "回到主视角");
  } else {
    // 切换至主视角
    viewer3D.setView(Glodon.Bimface.Viewer.ViewOption.Home);
    setButtonText("btnZoomToSelection", "构件定位");
  }
  isZoomToSelectionActivated = !isZoomToSelectionActivated;
}

再次加载页面，我们就可以对构件进行定位操作了。

构件定位

# 3. 构件着色

为了让关注构件在模型中更加明显，我们可以对其进行着色操作。这里我们对在BIMFACE中，有两种方式定义颜色：

RGB：Red、Green、Blue，取值均为0~255；
16进制：16进制的颜色表达方式，如"#11DAB7"。

我们首先添加一个按钮：

<button class="button" id="btnOverrideColor" onclick="overrideComponents()">构件着色</button>

然后在script标签内构造函数：

// ************************** 着色 **************************
let isOverrideActivated = false;
function overrideComponents(){
  if (!isOverrideActivated) {
    // 新建color对象，指定关注构件被染色的数值
    let color = new Glodon.Web.Graphics.Color("#11DAB7", 0.5);
    // 对关注构件进行着色
    viewer3D.overrideComponentsColorById(["389601"], color);
    viewer3D.render();
    setButtonText("btnOverrideColor", "清除着色");
  } else {
    // 清除构件着色
    viewer3D.getModel().clearOverrideColorComponents();
    viewer3D.render();
    setButtonText("btnOverrideColor", "构件着色");
  }
  isOverrideActivated = !isOverrideActivated;
}

再次加载页面，我们就可以对构件进行着色操作了。

构件着色

更多关于构件着色的功能，可参考示例Demo中的以下内容：

# 完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>BIMFACE model scene</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
      }
      .buttons {
        font-size: 0;
      }
      .button {
        margin: 5px 0 5px 5px;
        width: 90px;
        height: 30px;
        border-radius: 3px;
        border: none;
        background: #11DAB7;
        color: #FFFFFF;
      }
      .main {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
      }
      #domId {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class='main'>
      <div class='buttons'>
        <button class="button" id="btnIsolation" onclick="isolateComponents()">构件隔离</button>
        <button class="button" id="btnZoomToSelection" onclick="zoomToSelectedComponents()">构件定位</button>
        <button class="button" id="btnOverrideColor" onclick="overrideComponents()">构件着色</button>
      </div>
      <div id="domId"></div>
    </div>
    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script>
    <script>
      let viewToken = '<yourViewToken>';
      // 声明Viewer及App
      let viewer3D;
      let app;
      // 配置JSSDK加载项
      window.onload = function() {
        let loaderConfig = new BimfaceSDKLoaderConfig();
        loaderConfig.viewToken = viewToken;
        BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
      }
      // 加载成功回调函数
      function successCallback(viewMetaData) {
        let dom4Show = document.getElementById('domId');
        // 设置WebApplication3D的配置项
        let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
        webAppConfig.domElement = dom4Show;
        // 创建WebApplication3D，用以显示模型
        app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);  
        app.addView(viewToken);
        viewer3D = app.getViewer();
      }
      // 加载失败回调函数
      function failureCallback(error) {
        console.log(error);
      }

      // ************************** 隔离 **************************
      let isIsolationActivated = false;
      function isolateComponents() {
        if (!isIsolationActivated) {
          // 设置隔离选项，指定其他构件为半透明状态
          let makeOthersTranslucent = Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent;
          // 调用viewer3D.method，隔离楼层为"F2"的构件
          viewer3D.getModel().isolateComponentsByObjectData([{"levelName":"F2"}], makeOthersTranslucent);
          // 渲染三维模型
          viewer3D.render(); 
          // 修改按钮的文字内容
          setButtonText("btnIsolation", "取消隔离");
        } else {
          // 清除隔离
          viewer3D.getModel().clearIsolation();
          // 渲染三维模型
          viewer3D.render();
          // 修改按钮的文字内容
          setButtonText("btnIsolation", "构件隔离");
        }
        isIsolationActivated = !isIsolationActivated;
      }

      // ************************** 定位 **************************
      let isZoomToSelectionActivated = false;
      function zoomToSelectedComponents(){
        if (!isZoomToSelectionActivated) {
          // 选中id为"271431"的构件
          viewer3D.getModel().addSelectedComponentsById(["271431"]);
          // 定位到选中的构件
          viewer3D.getModel().zoomToSelectedComponents();
          // 清除构件选中状态
          viewer3D.getModel().clearSelectedComponents();
          setButtonText("btnZoomToSelection", "回到主视角");
        } else {
          // 切换至主视角
          viewer3D.setView(Glodon.Bimface.Viewer.ViewOption.Home);
          setButtonText("btnZoomToSelection", "构件定位");
        }
        isZoomToSelectionActivated = !isZoomToSelectionActivated;
      }

      // ************************** 着色 **************************
      let isOverrideActivated = false;
      function overrideComponents(){
        if (!isOverrideActivated) {
          // 新建color对象，指定关注构件被染色的数值
          let color = new Glodon.Web.Graphics.Color("#11DAB7", 0.5);
          // 对关注构件进行着色
          viewer3D.overrideComponentsColorById(["389601"], color);
          viewer3D.render();
          setButtonText("btnOverrideColor", "清除着色");
        } else {
          // 清除构件着色
          viewer3D.getModel().clearOverrideColorComponents();
          viewer3D.render();
          setButtonText("btnOverrideColor", "构件着色");
        }
        isOverrideActivated = !isOverrideActivated;
      }

      // ************************** 按钮文字 **************************
      function setButtonText(btnId, text) {
        let dom = document.getElementById(btnId);
        if (dom != null && dom.nodeName == "BUTTON") {
          dom.innerText = text;
        }
      }
    </script>
  </body>
</html>

← 加载显示模型构件强调与场景管理 →