fix(react-components): Improve Scene home camera button and bump to 0.55.2

react-components/package.json

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

react-components/src/hooks/useSceneDefaultCamera.tsx

@@ -4,8 +4,8 @@
 
 import { useMemo } from 'react';
 import { useSceneConfig } from '../query/useSceneConfig';
-import { Vector3, Quaternion, Euler, MathUtils, Box3 } from 'three';
-import { CDF_TO_VIEWER_TRANSFORMATION, type Cognite3DViewer } from '@cognite/reveal';
+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';
 
@@ -32,13 +32,42 @@ export const useSceneDefaultCamera = (
       };
     }
 
+    const cameraNotSet =
+      data.sceneConfiguration.cameraTranslationX === 0 &&
+      data.sceneConfiguration.cameraTranslationY === 0 &&
+      data.sceneConfiguration.cameraTranslationZ === 0 &&
+      data.sceneConfiguration.cameraEulerRotationX === 0 &&
+      data.sceneConfiguration.cameraEulerRotationY === 0 &&
+      data.sceneConfiguration.cameraEulerRotationZ === 0 &&
+      data.sceneConfiguration.cameraTargetX === undefined &&
+      data.sceneConfiguration.cameraTargetY === undefined &&
+      data.sceneConfiguration.cameraTargetZ === undefined;
+
+    // Use a good default camera position if no camera configuration is provided
+    if (cameraNotSet) {
+      return {
+        fitCameraToSceneDefault: () => {
+          if (viewer.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);
+          }
+        },
+        isFetched: false
+      };
+    }
+
     const position = new Vector3(
       data.sceneConfiguration.cameraTranslationX,
       data.sceneConfiguration.cameraTranslationY,
       data.sceneConfiguration.cameraTranslationZ
     );
 
-    const target = extractCameraTarget(data.sceneConfiguration, viewer);
+    const target = extractCameraTarget(data.sceneConfiguration);
     position.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
     target.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
 
@@ -57,10 +86,7 @@ export const useSceneDefaultCamera = (
         ) {
           viewer.cameraManager.setCameraState({ position, target });
         } else {
-          const direction = new Vector3().subVectors(position, target).normalize();
-          const rotation = new Euler().setFromVector3(direction);
-          const quaternion = new Quaternion().setFromEuler(rotation);
-
+          const quaternion = getLookAtRotation(position, target);
           viewer.cameraManager.setCameraState({ position, rotation: quaternion });
         }
       },
@@ -69,8 +95,12 @@ export const useSceneDefaultCamera = (
   }, [viewer, data?.sceneConfiguration]);
 };
 
-function extractCameraTarget(scene: SceneConfiguration, viewer: Cognite3DViewer): Vector3 {
-  if (scene.cameraTargetX !== undefined) {
+function extractCameraTarget(scene: SceneConfiguration): Vector3 {
+  if (
+    scene.cameraTargetX !== undefined ||
+    scene.cameraTargetY !== undefined ||
+    scene.cameraTargetZ !== undefined
+  ) {
     return new Vector3(scene.cameraTargetX, scene.cameraTargetY, scene.cameraTargetZ);
   } else {
     const rotation = new Quaternion().setFromEuler(
@@ -87,15 +117,16 @@ function extractCameraTarget(scene: SceneConfiguration, viewer: Cognite3DViewer)
       scene.cameraTranslationY,
       scene.cameraTranslationZ
     );
-    // As a heuristic, use distance to center of all models' bounding
-    // boxes as target distance
-    const positionToSceneCenterDistance = position.distanceTo(
-      viewer.models
-        .reduce((acc, m) => acc.union(m.getModelBoundingBox()), new Box3())
-        .getCenter(new Vector3())
-    );
-    return position
-      .clone()
-      .add(new Vector3(0, 0, -positionToSceneCenterDistance).applyQuaternion(rotation));
+    return position.clone().add(new Vector3(0, 0, -50).applyQuaternion(rotation));
   }
 }
+
+function getLookAtRotation(position: Vector3, target: Vector3): Quaternion {
+  const direction = new Vector3().subVectors(position, target).normalize();
+  const up = new Vector3(0, 1, 0);
+  const right = new Vector3().crossVectors(up, direction).normalize();
+  const recomputedUp = new Vector3().crossVectors(direction, right).normalize();
+  const rotationMatrix = new Matrix4();
+  rotationMatrix.makeBasis(right, recomputedUp, direction);
+  return new Quaternion().setFromRotationMatrix(rotationMatrix);
+}