基于Three.js如何进行构件查询？（详解）

示例描述与操作指南

构件查询示例，是对当前模型的数据进行按需查找。可以筛选楼层，在指定楼层进行查找；可对某类构件进行查找；也可针对某个构件名称进行模糊查询。用户可以将完整代码直接下载下来后，将模型id和用户个人账户devcode替换上去，即可展示自有模型。

应用场景

用于用户想按照自定义的搜索条件搜索模型里的对应构件和信息。

示例效果展示

实现步骤

第一步 创建搜索区域

创建用户使用的搜索区域。

// 创建左侧搜索框
  const addTileandSearchBoard = (modelKey) => {
  const toolBarZK = $("#viewport");
  const toolContainer = $(" <div id="container"></div>");
  toolBarZK.append(toolContainer);
  $(toolContainer).append("<div id="descriptionContainer" style="display:none"> </div>")
  $(toolContainer).append("<div id="descriptionContainer2" style="display:none"> </div>")
  $("#descriptionContainer").append("<p id ="title1">" + "对当前模型构件进行筛选，可以只选填部分参数。当前接口更多细节，请前往API页查看 " + "</p>");
  $("#descriptionContainer2").append("<p id ="title2">" + "请输入构件名称，进行模糊查找，例如:门、窗户等 " + "</p>");
  $(toolContainer).append("<p id ="title" style="font-size:30px;margin-bottom: 21px;margin-left: 40px;"> " +
    "构件查询示例 " +
    "<i style="font-size:20px;cursor:pointer;"class="far fa-question-circle" οnmοusedοwn="showDescription()"></i>" +
    "</p>");
  const formContainer = $("<form id="formContainer" class="layui-form"></form>");
  $(toolContainer).append(formContainer);
  const formItem1 = $("<div class="layui-form-item">" +
    "<label class="layui-form-label">楼层</label>" +
    "<div class="layui-input-block">" +
    "<select name="louceng" lay-filter="louceng" id="louceng" lay-search >" +
    "<option value="disable" id="disable">数据获取中</option>" +
    " </select>" +
    " </div>" +
    "  </div>");
  const formItem2 = $("<div class="layui-form-item">" +
    "<label class="layui-form-label">构件类</label>" +
    "<div class="layui-input-block">" +
    "<select name="goujianlei" lay-filter="goujianlei" id="goujianlei" lay-search  >" +
    "<option value="disable2" id="disable2">数据获取中</option>" +
    "<option value="">--</option>" +
    " </select>" +
    " </div>" +
    "  </div>");
  const formItem3 = $("  <div class="layui-form-item">" +
    "    <label class="layui-form-label">构件名称</label>" +
    "    <div class="layui-input-inline" style="width: 110px;position:absolute">" +
    "      <input type="text" name="gjname" autocomplete="off" class="layui-input">" +
    "    </div>" +
    "    <div class="layui-form-mid layui-word-aux" style="left: 210px;position: absolute">" +
    "       <i style="font-size:20px;cursor:pointer;"class="far fa-question-circle" οnmοusedοwn="showDescription2()"></i>" +
    "     </div>" +
    "  </div>");
  const formItem4 = $("  <div class="layui-form-item">" +
    "    <div class="layui-input-block">" +
    "      <button id="searchButton" class="lyButton" disabled lay-submit lay-filter="beginSearch">开始搜索</button>" +
    "    </div>" +
    "  </div>");

  $("#formContainer").append(formItem1);
  $("#formContainer").append(formItem2);
  $("#formContainer").append(formItem3);
  $("#formContainer").append(formItem4);

  layui.use("form", function () {
    form = layui.form;
    //监听提交
    form.on("submit(beginSearch)", function (data) {
      const info = data.field;
      updateMoelBySearchResult(modelKey, info.louceng, info.goujianlei, info.gjname);
      return false;   // 阻止表单跳转
    });

    form.on("select(louceng)", function (data) {
      updateComponentStyleByLevelId(data.value);
      return false; // 阻止表单跳转
    });
  });
}

第二步 根据搜索结果对模型进行相应显示

根据用户选择的条件，利用数据接口获取搜索结果并对模型操作区域进行相应的显示。

// 用户点击搜索后的操作，将用户选择的楼层和构件类还有构件名称利用[数据接口:获取模型空间树结构]返回的构件id
// 将这些构件反选透明
const updateMoelBySearchResult = (modelKey, levelId, type, name) => {
  $("#searchButton").prepend("<i id="searchingIcon" class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>");
  $("#searchButton").attr("disabled", "disabled");
  getModelSearchComponents(modelKey, levelId, type, name).then((result) => {
    let comArray = [];
    if (result.code === 2000) {
      $("#searchingIcon").remove();
      $("#searchButton").removeAttr("disabled");
      if (result.data.length !== 0) {
        result.data.forEach(item => {
          if (item.children === null) {
            comArray.push(item.key);
          } else if (item.children && item.children.length !== 0) {
            item.children.forEach(item1 => {
              comArray.push(item1);
            })
          }
        });
        if (comArray.length !== 0) {
           viewer3D.resetScene({
              view:false,
              visible:true,
              selected:true,
              transparent:true,
              colorfully:true,
           });
           viewer3D.transparentOtherComponentsByKey(comArray);
          viewer3D.flyTo(mainView);
        }
      } else {
         viewer3D.transparentOtherComponentsByKey(comArray);
         layer.open({
          title: "提示"
          , content: "当前条件下无对应构件，请重新选填查找条件"
        });
      }
    } else {
       BIMWINNER.BOS3D.message("error", "错误码:" + result.code + ",错误内容:" + result.message);
    }
  });
}

下载完整代码