Forge Viewer图纸视图中Autodesk DataViz API无法加载Sprite问题

问题背景 #

现有代码在3D视图（单/多模型）中能正常显示Sprite，但切换到图纸视图时完全无法加载。已尝试修改边界盒为THREE.Box2，检查坐标z值为0，但无效果。

核心原因 #

1. 2D/3D渲染层级差异：图纸视图（2D）的渲染逻辑与3D不同，Sprite默认z=0会被图纸的矢量图形遮挡，无法显示在顶层。
2. 事件触发不匹配：GEOMETRY_LOADED_EVENT在2D视图中的触发时机或逻辑与3D不一致，导致Sprite未被正确初始化。
3. DataViz扩展适配问题：Autodesk.DataVisualization扩展默认针对3D场景设计，切换到2D视图时需要重新适配坐标系和渲染参数。

解决方案 #

1. 监听视图切换事件，重新加载Sprite #

添加VIEWER_SWITCHED_EVENT监听，在切换到2D视图时清空原有Sprite并重新创建：

viewerInst.addEventListener(Autodesk.Viewing.VIEWER_SWITCHED_EVENT, async (e) => {
  // 判断当前是否切换到2D图纸视图
  if (e.target.currentViewer === '2d') {
    const dataVizExt = await e.target.loadExtension('Autodesk.DataVisualization');
    dataVizExt.removeAllViewables();
    // 重新添加Sprite
    addSprites(e.target, e.target.model, prepData.current);
  }
});

2. 适配2D坐标系，调整Sprite层级 #

在findViewables函数中，针对2D模型调整Sprite的z坐标，确保其渲染在图纸之上：

const findViewables = useCallback(async (viewer, model, dbIDs) => {
  const DataVizCore = Autodesk.DataVisualization.Core;
  const viewableType = DataVizCore.ViewableType.SPRITE;
  const spriteColor = new THREE.Color(0xffffff);

  // 样式定义保持不变
  const style_default = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteNfDefault);
  const style_success = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteNfSuccess);
  const style_warning = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteNfWarning);
  const style_informative = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteNfInformative);
  const style_danger = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteNfDanger);

  const viewableData = new DataVizCore.ViewableData();
  viewableData.spriteSize = 40;

  dbIDs.forEach(el => {
    el.model.getData().instanceTree.enumNodeFragments(el.dbId, async fragId => {
      const frags = el.model.getFragmentList();
      let bbox = new THREE.Box3();
      frags.getWorldBounds(fragId, bbox);

      const center = bbox.getCenter();
      // 针对2D模型，设置微小的z值确保Sprite在图纸上方
      if (viewer.model.is2D()) {
        center.z = 0.1;
      }

      // Sprite创建逻辑保持不变
      const viewable_default = new DataVizCore.SpriteViewable(center, style_default, el.dbId);
      const viewable_success = new DataVizCore.SpriteViewable(center, style_success, el.dbId);
      const viewable_warning = new DataVizCore.SpriteViewable(center, style_warning, el.dbId);
      const viewable_informative = new DataVizCore.SpriteViewable(center, style_informative, el.dbId);
      const viewable_danger = new DataVizCore.SpriteViewable(center, style_danger, el.dbId);

      if (el.value === 'accepted') {
        viewableData.addViewable(viewable_success);
      } else if (el.value === 'declined') {
        viewableData.addViewable(viewable_danger);
      } else if (el.value === 'sent') {
        viewableData.addViewable(viewable_informative);
      } else if (el.value === 'submitted' || el.value === 'provided') {
        viewableData.addViewable(viewable_warning);
      } else {
        viewableData.addViewable(viewable_default);
      }
    });
  });
  await viewableData.finish();

  return viewableData;
}, []);

3. 修改addSprites函数，传入Viewer实例 #

确保findViewables能获取到Viewer实例来判断当前是否为2D视图：

const addSprites = useCallback(
  async (viewer, model, dbIDs) => {
    const dataVizExtn = await viewer.getExtension('Autodesk.DataVisualization');
    const data = await findViewables(viewer, model, dbIDs);
    dataVizExtn.addViewables(data);
    const showViewables = true;
    const enableOcclusion = false;
    dataVizExtn.showHideViewables(showViewables, enableOcclusion);
    viewer.search('');
  },
  [findViewables],
);

4. 优化事件监听覆盖2D场景 #

确保2D模型加载完成后触发Sprite创建，可补充监听OBJECT_TREE_CREATED_EVENT：

viewerInst.addEventListener(Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, async (e) => {
  if (e.model.is2D()) {
    const ext = await e.target.loadExtension('Autodesk.DataVisualization');
    ext.removeAllViewables();
    addSprites(e.target, e.model, prepData.current);
  }
});

验证要点 #

• 切换到图纸视图后，检查Sprite的z坐标是否为0.1（或其他微小正值）
• 确认VIEWER_SWITCHED_EVENT和OBJECT_TREE_CREATED_EVENT在2D场景下正常触发
• 查看浏览器控制台是否有DataViz相关报错，排查资源加载问题

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