feat(react-components): Add ground plane rotation 0.52.0

react-components/package.json

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

react-components/src/hooks/useGroundPlaneFromScene.tsx

@@ -18,6 +18,7 @@ import { useSDK } from '../components/RevealCanvas/SDKProvider';
 import { CDF_TO_VIEWER_TRANSFORMATION, CustomObject } from '@cognite/reveal';
 import { useReveal } from '../components/RevealCanvas/ViewerContext';
 import { clear } from '../architecture/base/utilities/extensions/arrayExtensions';
+import { transformation3dToMatrix4 } from '../utilities/transformation3dToMatrix4';
 
 export const useGroundPlaneFromScene = (sceneExternalId: string, sceneSpaceId: string): void => {
   const { data: scene } = useSceneConfig(sceneExternalId, sceneSpaceId);
@@ -83,19 +84,17 @@ export const useGroundPlaneFromScene = (sceneExternalId: string, sceneSpaceId: s
       }
       const texture = groundPlaneTextures[index];
       const material = new MeshBasicMaterial({ map: texture, side: DoubleSide });
-      const geometry = new PlaneGeometry(10000 * groundPlane.scaleX, 10000 * groundPlane.scaleY);
+      const geometry = new PlaneGeometry(10000, 10000);
 
       geometry.name = `CogniteGroundPlane`;
 
       const mesh = new Mesh(geometry, material);
-      mesh.position.set(
-        groundPlane.translationX,
-        groundPlane.translationY,
-        groundPlane.translationZ
-      );
-      mesh.rotation.set(-Math.PI / 2, 0, 0);
 
-      mesh.position.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
+      const matrix4 = transformation3dToMatrix4(groundPlane).premultiply(
+        CDF_TO_VIEWER_TRANSFORMATION
+      );
+      mesh.matrix.copy(matrix4);
+      mesh.matrixAutoUpdate = false;
 
       const customObject = new CustomObject(mesh);
       customObject.isPartOfBoundingBox = false;

react-components/src/utilities/transformation3dToMatrix4.ts

@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { Euler, MathUtils, Matrix4, Quaternion, Vector3 } from 'three';
+import { type Transformation3d } from '../hooks/types';
+
+export const transformation3dToMatrix4 = ({
+  translationX,
+  translationY,
+  translationZ,
+  eulerRotationX,
+  eulerRotationY,
+  eulerRotationZ,
+  scaleX,
+  scaleY,
+  scaleZ
+}: Transformation3d): Matrix4 => {
+  const quaternion = new Quaternion().setFromEuler(
+    new Euler(
+      MathUtils.degToRad(eulerRotationX),
+      MathUtils.degToRad(eulerRotationY),
+      MathUtils.degToRad(eulerRotationZ),
+      'XYZ'
+    )
+  );
+
+  return new Matrix4().compose(
+    new Vector3(translationX, translationY, translationZ),
+    quaternion,
+    new Vector3(scaleX, scaleY, scaleZ)
+  );
+};