diff --git a/react-components/package.json b/react-components/package.json index e139099319b..4cc0c4105fc 100644 --- a/react-components/package.json +++ b/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", diff --git a/react-components/src/hooks/useGroundPlaneFromScene.tsx b/react-components/src/hooks/useGroundPlaneFromScene.tsx index fbf6650efd8..3a70b211dcf 100644 --- a/react-components/src/hooks/useGroundPlaneFromScene.tsx +++ b/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; diff --git a/react-components/src/utilities/transformation3dToMatrix4.ts b/react-components/src/utilities/transformation3dToMatrix4.ts new file mode 100644 index 00000000000..813be0f8972 --- /dev/null +++ b/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) + ); +};