Autodesk Forge Viewer 如何基于外部数据库数据在指定构件上放置标注点

1 标注点位坐标获取 #

首先通过选中的dbId计算构件的中心世界坐标，作为标注放置的基准位置：

// 传入dbId返回构件包围盒中心的3D世界坐标
function getComponentCenter(dbId) {
  const fragList = viewer.model.getFragmentList();
  const bbox = new THREE.Box3();
  fragList.getWorldBounds(dbId, bbox);
  const center = new THREE.Vector3();
  bbox.getCenter(center);
  return center;
}

2 添加标注/自定义几何 #

支持两种实现方式，可按需选择：

2.1 官方Markups扩展（兼容2D/3D视图） #

用Viewer内置的标记扩展实现标注，原生支持多视图适配：

// 先加载标记扩展
let markupsExt;
viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then(ext => {
  markupsExt = ext;
  markupsExt.enterEditMode();
});

// 添加点标注，可绑定评论内容
function addPointMarker(worldPos, comment, dbId) {
  // 3D世界坐标转屏幕坐标
  const screenPos = viewer.worldToClient(worldPos);
  // 创建红色点标记
  const pointMarker = new Autodesk.Viewing.Extensions.Markups.Core.MarkupPoint(markupsExt, {
    x: screenPos.x,
    y: screenPos.y,
    strokeColor: { r: 255, g: 0, b: 0, a: 1 },
    radius: 5
  });
  markupsExt.addMarkup(pointMarker);
  // 绑定自定义属性，用于后续存储
  pointMarker.dbId = dbId;
  pointMarker.comment = comment;
  // 如需显示评论气泡，可自行创建DOM元素定位到screenPos坐标处
}

2.2 自定义THREE.js几何（3D视图专用） #

如果需要自定义3D几何样式，直接往Viewer场景添加Three对象即可：

// 示例：在目标位置添加红色球形标注
function addCustomSphereMarker(worldPos, dbId) {
  const geom = new THREE.SphereGeometry(0.05, 16, 16);
  const mat = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  const sphere = new THREE.Mesh(geom, mat);
  sphere.position.copy(worldPos);
  sphere.dbId = dbId;
  viewer.impl.scene.add(sphere);
  viewer.impl.invalidate(true); // 触发场景重绘
}

3 标注数据存储 #

存储到外部数据库时，建议包含以下字段：

• 模型唯一标识（如urn，避免不同模型的标注混淆）
• 关联构件的dbId
• 标注位置的x/y/z世界坐标值
• 标注类型、样式参数、评论内容等业务属性

4 加载模型时同步渲染标注 #

监听模型加载完成事件，拉取存储的标注数据批量渲染即可：

viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, async () => {
  // 调用后端接口拉取当前模型对应的所有标注数据
  const markerList = await fetchCurrentModelMarkers(viewer.model.urn);
  // 遍历渲染标注
  markerList.forEach(item => {
    const worldPos = new THREE.Vector3(item.x, item.y, item.z);
    if(item.type === 'point') {
      addPointMarker(worldPos, item.comment, item.dbId);
    } else if(item.type === 'sphere') {
      addCustomSphereMarker(worldPos, item.dbId);
    }
  });
});

2D视图适配说明：2D场景下dbId的坐标获取逻辑与3D基本一致，MarkupsCore扩展原生支持2D视图，无需大幅修改代码。

内容的提问来源于stack exchange，提问作者Abed Aarabi