fix(react-components): fixed camera not setting to fit to model when …

…no camera setting in scene configuration (#4937)

* fixed camera not setting to fit to model when scene configuration do not have camera position and rotation

* bumped the version

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.73.6",
+  "version": "0.73.7",
   "exports": {
     ".": {
       "import": "./dist/index.js",

react-components/src/components/RevealToolbar/ResetCameraButton.tsx

@@ -27,7 +27,11 @@ export const ResetCameraButton = ({
     if (viewer.get360ImageCollections() !== undefined) {
       viewer.exit360Image();
     }
-    if (sceneExternalId !== undefined && sceneSpaceId !== undefined) {
+    if (
+      sceneExternalId !== undefined &&
+      sceneSpaceId !== undefined &&
+      resetToDefaultSceneCamera !== undefined
+    ) {
       resetToDefaultSceneCamera.fitCameraToSceneDefault();
       return;
     }

react-components/src/hooks/scenes/useSceneConfig.ts

@@ -115,6 +115,7 @@ export const useSceneConfig = (
       };
       return scene;
     },
+    enabled: sceneExternalId !== undefined && sceneSpace !== undefined,
     staleTime: Infinity
   });
 };

react-components/src/hooks/useSceneDefaultCamera.tsx

@@ -8,28 +8,26 @@ import { Vector3, Quaternion, Euler, MathUtils, Matrix4 } from 'three';
 import { CDF_TO_VIEWER_TRANSFORMATION } from '@cognite/reveal';
 import { type SceneConfiguration } from '../components/SceneContainer/sceneTypes';
 import { useReveal } from '../components/RevealCanvas/ViewerContext';
+import { use3dModels } from './use3dModels';
 
 export const useSceneDefaultCamera = (
   sceneExternalId: string | undefined,
   sceneSpaceId: string | undefined
-): { fitCameraToSceneDefault: () => void; isFetched: boolean } => {
-  const { data } = useSceneConfig(sceneExternalId, sceneSpaceId);
+): { fitCameraToSceneDefault: () => void } | undefined => {
+  const { data, isFetched } = useSceneConfig(sceneExternalId, sceneSpaceId);
   const viewer = useReveal();
+  const models = use3dModels();
 
   return useMemo(() => {
     if (data === null) {
       return {
         fitCameraToSceneDefault: () => {
-          viewer.fitCameraToModels(viewer.models);
-        },
-        isFetched: true
+          viewer.fitCameraToModels(models, 0, true);
+        }
       };
     }
-    if (data === undefined) {
-      return {
-        fitCameraToSceneDefault: () => {},
-        isFetched: false
-      };
+    if (data === undefined || !isFetched) {
+      return undefined;
     }
 
     const cameraNotSet =
@@ -47,17 +45,16 @@ export const useSceneDefaultCamera = (
     if (cameraNotSet) {
       return {
         fitCameraToSceneDefault: () => {
-          if (viewer.models.length === 0) {
+          if (models.length === 0) {
             // If no models are loaded, set a default camera position
             // This is the same default position that have been used in SceneBuilder
             const position = new Vector3(-100, 200, 400);
             const target = new Vector3();
             viewer.cameraManager.setCameraState({ position, target });
           } else {
-            viewer.fitCameraToModels(viewer.models);
+            viewer.fitCameraToModels(models, 0, true);
           }
-        },
-        isFetched: false
+        }
       };
     }
 
@@ -89,10 +86,9 @@ export const useSceneDefaultCamera = (
           const quaternion = getLookAtRotation(position, target);
           viewer.cameraManager.setCameraState({ position, rotation: quaternion });
         }
-      },
-      isFetched: true
+      }
     };
-  }, [viewer, data?.sceneConfiguration]);
+  }, [viewer, data, isFetched, models]);
 };
 
 function extractCameraTarget(scene: SceneConfiguration): Vector3 {

react-components/stories/SceneContainer.stories.tsx

@@ -98,10 +98,13 @@ const SceneContainerStoryContent = ({
   defaultResourceStyling
 }: SceneContainerStoryContentProps): ReactElement => {
   const reveal = useReveal();
-  const { fitCameraToSceneDefault } = useSceneDefaultCamera(sceneExternalId, sceneSpaceId);
+  const cameraToSceneDefault = useSceneDefaultCamera(sceneExternalId, sceneSpaceId);
   useEffect(() => {
-    fitCameraToSceneDefault();
-  }, [reveal, fitCameraToSceneDefault]);
+    if (cameraToSceneDefault === undefined) {
+      return;
+    }
+    cameraToSceneDefault.fitCameraToSceneDefault();
+  }, [reveal, cameraToSceneDefault]);
   return (
     <>
       <SceneContainer