如何在Forge Viewer的房间元素内部添加房间名称文本？

你可以通过以下两种成熟方案实现房间名称在对应元素内部的展示：

方案1：使用内置HtmlOverlay扩展（推荐，实现简单，文本清晰） #

该方案基于Viewer官方提供的HTML覆盖层能力，标签会固定跟随3D坐标，且始终保持清晰不受3D场景渲染精度影响。

• 第一步：加载HtmlOverlay扩展

let overlayExt
await viewer.loadExtension('Autodesk.HtmlOverlay').then(ext => {
  overlayExt = ext
})

• 第二步：遍历所有房间元素，逐个生成标签

// 假设roomDbIds是你提前获取的所有房间元素的dbId列表
roomDbIds.forEach(async dbId => {
  // 1. 读取房间名称属性
  const roomProps = await new Promise(resolve => viewer.getProperties(dbId, resolve))
  const roomName = roomProps.properties.find(item => item.displayName === '房间名称')?.displayValue
  if (!roomName) return

  // 2. 计算房间几何中心点坐标
  const renderProxy = viewer.impl.getRenderProxy(viewer.model, dbId)
  const bbox = new THREE.Box3().setFromObject(renderProxy)
  const roomCenter = bbox.getCenter(new THREE.Vector3())

  // 3. 创建标签DOM
  const label = document.createElement('div')
  label.style.cssText = `
    background: rgba(255,255,255,0.8);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    pointer-events: none;
  `
  label.textContent = roomName

  // 4. 添加到覆盖层
  overlayExt.addHtml(`room-label-${dbId}`, label, roomCenter)
})

方案2：使用Three.js Sprite（适合需要文本随场景缩放、支持遮挡的场景） #

该方案生成的文本属于3D场景的一部分，会随视角远近缩放，也会被前方的构件遮挡。

• 生成Sprite标签代码示例：

roomDbIds.forEach(async dbId => {
  // 读取房间名称、计算中心点的逻辑和方案1一致
  const roomName = 'xxx' // 替换为实际读取到的房间名
  const roomCenter = new THREE.Vector3() // 替换为实际计算的中心点

  // 用Canvas生成文本纹理
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  canvas.width = 256
  canvas.height = 64
  ctx.font = 'bold 32px Arial'
  ctx.fillStyle = '#000000'
  ctx.textAlign = 'center'
  ctx.fillText(roomName, 128, 40)
  
  const texture = new THREE.CanvasTexture(canvas)
  const sprite = new THREE.Sprite(new THREE.SpriteMaterial({
    map: texture,
    transparent: true
  }))
  sprite.position.copy(roomCenter)
  sprite.scale.set(6, 1.5, 1) // 根据实际房间大小调整缩放参数

  // 添加到场景
  viewer.impl.scene.add(sprite)
  viewer.impl.invalidate(true, true, true)
})

效果参考 #

注意事项 #

• 可以监听Viewer的cameraChanged事件，动态隐藏不在当前视野内、或者被遮挡的标签，避免界面杂乱
• 若模型包含多个楼层，可配合楼层过滤功能，只显示当前激活楼层的房间标签
• 若部分异形房间的中心点不在房间内部，可通过射线检测调整标签位置，确保落在房间区域内

内容的提问来源于stack exchange，提问作者Than Naing Oo