在ThreeJS中如何让三维模型实现空间树展示？

示例描述与操作指南

空间树展示示例，主要用于将 BIM 模型的建筑空间结构展示出来。通过调用获取模型空间树列表接口将模型空间架构展示出来。用户将完整代码下载下来后，将模型 id 和用户个人账户 devcode 替换上去，即可展示自有模型。

示例效果展示

实现步骤

第一步 获取并创建树结构
通过调用获取模型空间树的接口，获取对应模型树结构并在三维界面左侧展示出来，具体接口在页面下方相关接口中展示。

// 添加左侧树操作区域
const initTree = (tree) => {
  $('#tree').treeview({
    data: tree,
    collapseIcon: "glyphicon glyphicon-minus", // 树节点关闭的图标
    expandIcon: 'glyphicon glyphicon-plus',  // 树节点展开的图标
    onNodeSelected: function (event, data) {
      const hightArray = ergodicLocationNodes(data); // 获取当前树节点下所有的构件id
      vizbim.resetScene(false, false, false, true, true, false); // 恢复模型到初始状态
      vizbim.adaptiveSize(hightArray);  // 让模型视角适应选择的构件数组
      vizbim.reverseTransparentObjs(hightArray, 0.4, true); // 对此构件数组进行反选透明操作
    },
    onNodeUnselected: (event, data) => {
      vizbim.resetScene(true, true, true, true, true, true); // 恢复模型到初始状态
    }
  });
  $('#tree').treeview('collapseAll', {silent: true});
}

复制
第二步 获取空间树

// 数据接口:通过模型key获取模型空间树结构
const getSpaceTreeComponents = (filekey) => {
  return fetch(`${op.baseaddress}models/${filekey}/trees/location?devcode=${op.devcode}`)
    .then(response => response.json())
}

第二步 获取空间树

// 数据接口:通过模型key获取模型空间树结构
const getSpaceTreeComponents = (filekey) => {
  return fetch(`${op.baseaddress}models/${filekey}/trees/location?devcode=${op.devcode}`)
    .then(response => response.json())

第三步 反选透明构件组
利用已经获取的空间包围区域，为选中区域添加三维标签。

// 根据用户点击的名称，获取当前树节点下所有的构件id，并对这些构件进行反选透明操作
const ergodicLocationNodes = (nodes) => {
  var array = [];
  if (nodes.nodes) {
    for (var i = 0; i < nodes.nodes.length; i++) {
      var list = ergodicLocationNodes(nodes.nodes[i]);
      array = list.reduce(function (coll, item) {
        coll.push(item);
        return coll;
      }, array);
    }
  } else {
    array.push(nodes.id);
  }

下载完整代码