在3DTiles 模型中添加自定义属性

关于

某些场景下我们需要使用到携带自定义信息的3DTiless文件，比如在3DTiles图层内的楼栋或灯杆，拥有固定的ID，需要把ID写在模型里面，并可在平台中读取到该信息。 可使用本文介绍的方法添加属性，并使用3d-tiles-renderer提供的api读取到相关信息。

名词声明

1.threeEditor在线3D场景编辑器，用于制作测试数据

2.3d-tiles-renderer 3DTiles加载插件

3.ceisumlab 用于将各种文件类型的模型数据转为3DTiles

生成模型

模型由obj文件生成，通过cesiumlab转换换成为3dtiles文件。

1.编辑模型

使用常规模型编辑工具都可以，当前示例使用threeEditor。 注意每个单体的命名，该命名将会作为后续属性文件的唯一标识

2.编写属性

属性文件要求如下：

（1）必须是csv格式，utf8编码。

（2）第一列必须是【唯一名称】。

（3）第一列的值和模型场景里的名称关联匹配。

CSV示例：

唯一名称	uid	type
Box	000001	a
Box1	000002	b
Box2	000003	b

转换格式

1.打开cesiumlab，选择“数据处理->通用模型切片”，导入obj文件，设置对应的属性文件路径

2.属性字段模块“全选”所有字段

3.数据存储模块，存储类型选择“散列”，填写输出路径，提交处理

使用模型

1.将生成的模型数据拷贝到 public\static\tiles${目录名}

2.调整 tileset.json，根节点下的transform改为如下所示， 表示模型xyz放大50倍，坐标归零，可根据需要适当调整。

{
  "transform": [
    50.0,
    0.0,
    0.0,
    0.0,

    0.0,
    50.0,
    0.0,
    0.0,

    0.0,
    0.0,
    50.0,
    0.0,

    0.0,
    0.0,
    0.0,
    1.0
  ]
}

3. 3d-tiles-renderer调用

const tilesRenderer = new TilesRenderer( './path/to/tileset.json' )

// 可遍历模型
tilesRenderer.onLoadModel = function (scene) {
  scene.traverse(c => {
    debugger
  })
}

// 获取当前选中模型自定义属性并打印
targets = raycaster.intersectObject( scene, true );
if ( targets.length ) {
  const {face, object} = targets[0]
  // 查找自定义属性
  const batchidAttr = object.geometry.getAttribute('_batchid')
  if (batchidAttr) {
    let batchTableObject = object;

    while (!batchTableObject.batchTable) {
      batchTableObject = batchTableObject.parent
    }

    // 获取对象所有属性
    const batchTable = batchTableObject.batchTable
    const keys = batchTable.getKeys()
    const hoveredBatchid = batchidAttr.getX(face.a)
    const batchData = keys.map(k => {
      return {
        key: k,
        value: batchTable.getData(k)[hoveredBatchid]
      }
    })
    // 打印所有属性
    console.log(batchData)
  }
}