React中Autodesk Data Viz页面刷新后Sprite不显示问题排查

尝试在Autodesk Viewer视图中添加Sprite，但Sprite随机显示且无任何报错。在Model加载事件中创建ViewableData，即便视图中没有Sprite，数据也始终存在，页面刷新后无报错，其他功能正常，仅Sprite不显示。

核心问题：异步操作时序错误 #

你的代码中viewerInst.search是异步方法，但调用search后直接执行await viewableData.finish()，此时search的回调函数还未执行完成，导致viewableData.addViewable(viewable)还没来得及添加任何SpriteViewable，viewableData就已完成初始化，最终添加到DataViz扩展中的数据为空或不完整，这是Sprite随机不显示的根本原因。

另外，dbIDs.map(async el => {})中使用async毫无意义——enumNodeFragments是同步方法，且map不会等待异步函数执行完毕，反而会导致时序混乱。

修复步骤 #

1. 封装异步的search方法 #

将viewerInst.search封装为Promise，确保等待搜索完成后再处理结果：

const findViewables = useCallback(
  async model => {
    const DataVizCore = Autodesk.DataVisualization.Core;
    const viewableType = DataVizCore.ViewableType.SPRITE;
    const spriteColor = new THREE.Color(0xffffff);
    const baseURL = `${import.meta.env.VITE_AUTODESK_CALLBACK_URI}/src/assets/icons/logo/`;
    const spriteIconUrl = `${baseURL}logo.svg`;

    const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIconUrl);

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

    // 封装search为Promise，等待搜索完成
    const dbIDs = await new Promise((resolve) => {
      viewerInst.search('Scheduler_3DMarkup', resolve);
    });

    console.log('dbids 2', dbIDs);
    // 遍历dbIDs，去掉不必要的async
    for (const el of dbIDs) {
      model.getData().instanceTree.enumNodeFragments(el, fragId => {
        console.log('fragid', fragId);
        const frags = model.getFragmentList();
        let bbox = new THREE.Box3();
        frags.getWorldBounds(fragId, bbox);
        const viewable = new DataVizCore.SpriteViewable(bbox.getCenter(), style, el);
        console.log('viewable 3', viewable);
        viewableData.addViewable(viewable);
      });
    }

    await viewableData.finish();
    return viewableData;
  },
  [viewerInst],
);

2. 验证Sprite图标路径有效性 #

检查spriteIconUrl是否能正常访问：

• 直接在浏览器中打开该URL，确认SVG图标能正常加载
• 避免使用相对路径或存在跨域问题的地址，建议将图标放在静态资源目录，确保Viewer能正常获取

3. 排除遮挡因素 #

你设置了enableOcclusion: true，如果Sprite被模型遮挡可能会不显示。可以先暂时关闭遮挡验证：

dataVizExtn.showHideViewables(showViewables, false); // 先关闭遮挡验证

4. 确保DataViz扩展正确加载 #

在onGeometryLoaded中添加错误捕获，确认扩展加载状态：

const onGeometryLoaded = useCallback(
  async e => {
    try {
      const dataVizExtn = await viewerInst.loadExtension('Autodesk.DataVisualization');
      if (!dataVizExtn) {
        console.error('DataVisualization扩展加载失败');
        return;
      }
      const data = await findViewables(e.model);
      console.log('view data', data);
      dataVizExtn.addViewables(data);
      const showViewables = true;
      const enableOcclusion = false; // 先关闭遮挡
      dataVizExtn.showHideViewables(showViewables, enableOcclusion);
      viewerInst.addEventListener(Autodesk.DataVisualization.Core.MOUSE_HOVERING, onSpriteHover);
    } catch (err) {
      console.error('加载Sprite失败:', err);
    }
  },
  [findViewables, onSpriteHover, viewerInst],
);

其他注意事项 #

• 确保GEOMETRY_LOADED_EVENT只触发一次，避免重复添加Sprite
• 组件卸载时，调用dataVizExtn.removeAllViewables()清理DataViz扩展资源

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