通过层级列表循环生成树结构

列表生成树结构 应用

前提:

  • 列表有字段能表示所处层级(如Deep、Level).根据自己业务来。
  • 主要是针对列表对象来处理,组织成树结构。
  • 如下图:如图类似数据
在得到如图类似数据后,采取使用函数来组织树结构,同时生成层级序号(1,1.1,1.1.1)
   // 弊:此方法 还没兼顾任意开头层级 组织成树(有时间在兼顾)
   //通过列表数据 装成树(datas指类似上面的列表数据,Type指定层级字段,这默认’Level‘) 层级从1开始
  SetTZTree<T>(datas: Array<any>, Type = 'Level'): { result: any[] } {
    const result: Array<Array<TreeNodeInterface<T>>> = [[]];
    datas.map((item, index) => {
      const node = {
        key: String(index), // 为了做唯一,他们没有区别key 所以都用index了 (这随意,只要唯一即可)
        index,
        MbOrder: '', // 此字段 存层级序号
        name: item.Name,
        level: item[Type],
        orgData: item,
        children: []
      };
      try {
        if ((node.level - 1) === 0) {
          result[0].push(node);
          node.MbOrder = String(result[0].length);  // 层级序号赋值 以下类似
        } else if ((node.level) === 0) {
          node.level = 1;
          result[0].push(node);
          node.MbOrder = String(result[0].length);
        } else {
          const level = (node.level - 1);
          result[level].last.children.push(node);
          // 将上一层级的最后一个地址要放在下一个里面,这比较重要
          node.MbOrder = String(result[level].last.MbOrder + '.' + result[level].last.children.length);
        }
        
          // 这里指是否是 新建存入还是直接push 
        if (result[item.Level]?.length) {
          result[node.level].push(node);
        } else {
          result[node.level] = [node];
        }

      } catch (e) {
        console.log(e);
        throw new Error(e);
      }
    });
    return {result: result[0] ?? []};
  }
  1. 此方法 采取较为普通一点方式处理,只要知道引用数据类型存的是地址就行。
  2. 拿的永远是地址拿操作背后值。
  3. 这里函数处理后 result中存了每一层级的数据( [[第一层],[第二层],…,[n层]]
  4. 最后返回 第一层的数据就行就是完整的一颗树。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: three.js是一个用于创建WebGL渲染的JavaScript库,可以用来呈现三维模型。在three.js中,我们可以通过层级模型和结构来管理和组织多个对象的关系和位置。 层级模型在three.js中使用Object3D类的实例来表示,它可以作为一个容器,包含其他的3D对象或层级模型。通过将对象添加到层级模型中,我们可以实现对它们的组织和管理。例如,我们可以创建一个层级模型用于表示一个房间,然后将墙、地板、家具等对象添加到层级模型中。这样,当我们对该层级模型进行旋转或平移操作时,其中的所有对象都会相应地进行变换。 结构是一种层次组织的方式,在three.js中也可以应用于层级模型的组织。通过在层级模型中添加多个层级模型,我们可以创建一个包含多层次的结构。例如,我们可以创建一个根层级模型,用来表示整个场景,然后再在根层级模型中添加多个子层级模型,分别表示不同的物体和场景组件。这样,我们就可以通过操作结构的不同层级来对整个场景进行管理。 举个例子,假设我们要创建一个虚拟城市的三维模型。我们可以创建一个根层级模型来表示整个城市,然后再在根层级模型中添加多个子层级模型,分别用于表示不同的建筑物、道路、车辆等。这样,我们可以通过结构层级关系来管理和控制城市中的各个组成部分。 综上所述,通过three.js的层级模型和结构,我们可以方便地组织和管理多个对象的关系和位置,从而创建出复杂的三维模型场景。 ### 回答2: three.js层级模型是指通过three.js库创建的模型中存在不同层级的关系。在three.js中,可以通过添加子对象来构建层级关系,子对象可以有自己的位置、旋转和缩放属性。这种层级结构能够使得模型的各个部分可以独立运动或者进行组合动作。 举个例子,我们可以创建一个结构的模型,干作为整体的基础部分,枝作为干的子对象,叶子作为枝的子对象。这样的层级结构可以通过设置每个子对象的位置、旋转和缩放来实现的展示效果。 首先,我们可以创建一个干的几何体和材质,并将它们合并到一个Mesh对象中。然后,创建枝的几何体和材质,并将其作为干的子对象,通过设置枝的位置来使其连接到干上。接着,创建叶子的几何体和材质,并将其作为枝的子对象,同样设置叶子的位置来连接到枝上。 通过对枝和叶子的子对象进行旋转和缩放操作,可以实现的分支和展开效果。另外,可以通过模型的整体旋转和缩放来实现整个的运动和变化。 总之,通过three.js库提供的层级模型功能,我们可以构建复杂的结构模型,实现的展示和动画效果。这种层级结构使得模型的各个部分可以独立控制,为模型的展示和交互提供了更多灵活性和自由度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值