基于属性实现Dynamic element Coloring：如何生成可见元素property下拉列表

核心逻辑基于通用三维Viewer内置接口，全程不需要引入额外第三方依赖，具体实现步骤如下：

• 第一步：获取当前场景所有可见元素的唯一标识集合，以主流的Autodesk Forge Viewer为例，直接调用内置接口即可获取：
  const visibleDbIds = viewer.impl.visibilityManager.getVisibleNodes()
• 第二步：批量查询所有可见元素的属性，去重收集可用属性名，避免逐元素查询带来的性能损耗：

// 用于存储去重后的属性名，自动过滤重复项
const availableProps = new Set()

// 调用Viewer内置批量属性查询接口
viewer.model.getBulkProperties(visibleDbIds, [], (elementPropsList) => {
  elementPropsList.forEach(element => {
    // 遍历当前元素所有属性，过滤内置隐藏属性、无名称属性
    element.properties.forEach(prop => {
      if (prop.displayName && !prop.hidden) {
        availableProps.add(prop.displayName)
      }
    })
  })

  // 第三步：生成下拉菜单DOM并插入到Viewer工具栏/自定义面板
  const propSelect = document.createElement('select')
  // 给下拉加选中事件绑定，后续可直接对接着色逻辑
  propSelect.addEventListener('change', (e) => {
    const selectedProp = e.target.value
    // 这里写选中属性后的着色逻辑即可
  })

  // 把所有属性名生成option插入下拉
  availableProps.forEach(propName => {
    const option = document.createElement('option')
    option.value = propName
    option.textContent = propName
    propSelect.appendChild(option)
  })

  // 示例：将下拉插入Viewer默认工具栏
  viewer.toolbar.getControl('modelTools').addControl(propSelect)
})

如果使用其他类型的Viewer，仅需要替换对应「获取可见元素ID」「批量查询元素属性」的接口即可，核心逻辑完全通用。

小优化提示：如果模型量级较大，可新增属性白名单/黑名单过滤规则，避免下拉选项过多影响使用体验。

内容的提问来源于stack exchange，提问作者Tom Denby