javascriptreactjsautodesk-forgeautodeskautodesk-data-visualization

Autodesk Data Viz doesn't show sprites after page refresh (react)


I'm trying to add sprites in my view, but they appears randomly without any errors and i don't understande the reason. I'm create vieweable data on Model load event, i always have data there, even no sprites in viewer, so i don't i don't get the reason why they are not shown.

After refresh no error are thrown. Everything work ok, only sprites not shown.

Please see part of my code below. I hope someone know what is going on. I have no clue what i do wrong


  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; // Sprites as points of size value pixels

      viewerInst.search('Scheduler_3DMarkup', dbIDs => {
        console.log('dbids 2', dbIDs);
        dbIDs.map(async el => {
          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],
  );

  const onGeometryLoaded = useCallback(
    async e => {
      const dataVizExtn = await viewerInst.loadExtension('Autodesk.DataVisualization');

      const data = await findViewables(e.model);

      console.log('view data', data);
      dataVizExtn.addViewables(data);
      console.log('viz ext', dataVizExtn);

      const showViewables = true;
      const enableOcclusion = true;
      dataVizExtn.showHideViewables(showViewables, enableOcclusion);

      viewerInst.addEventListener(Autodesk.DataVisualization.Core.MOUSE_HOVERING, onSpriteHover);
      viewerInst.search('');
    },
    [findViewables, onSpriteHover, viewerInst],
  );

  useEffect(() => {
    if (viewerInst?.container) return;
    initializeViewerRuntime(runtime || {})
      .then(() => {
        setViewerInst(
          new Autodesk.Viewing.GuiViewer3D(container, {
            extensions: ['Viewing.Extension.PlanControlExtension'],
          }),
        );
      })
      .catch(err => console.error(err));
  }, [container, runtime, setViewerInst, viewerInst]);

  useEffect(() => {
    if (!viewerInst || !viewerInst?.container) return;
    viewerInst.start();

    viewerInst.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, onViewerCameraChange);
    viewerInst.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onViewerSelectionChange);
    viewerInst.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onGeometryLoaded);

    updateViewerState({});

    return () => {
      if (!viewerInst || !viewerInst?.container) return;
      console.log('CLEAAAAAR');
      viewerInst.removeEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, onViewerCameraChange);
      viewerInst.removeEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onViewerSelectionChange);
      viewerInst.removeEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onGeometryLoaded);

      viewerInst.removeEventListener(Autodesk.DataVisualization.Core.MOUSE_HOVERING, onSpriteHover);

      viewerInst.tearDown();
      viewerInst.finish();
      setViewerInst(null);
      Autodesk.Viewing.shutdown();
    };
  }, [onGeometryLoaded, onSpriteHover, onViewerCameraChange, onViewerSelectionChange, updateViewerState, viewerInst]);

}; ```

Solution

  • Code was updated and now it works well in 3D view. You can see my functions that work well in 3D view with one and multi-model in this question about 2D view Autodesk DataViz API on sheet view in Forge Viewer