Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Jun 28, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bb0082b
feat: Add ground plane rotation
greenbech Jun 24, 2024
8e52db9
chore: Simplify setting matrix
greenbech Jun 25, 2024
50cef59
chore: Rework API
greenbech Jun 25, 2024
ed2365b
fix: Apply CDF_TO_VIEWER_TRANSFORMATION correctly
greenbech Jun 25, 2024
1b527f6
bump to 0.51.0
greenbech Jun 28, 2024
8e2ad12
Merge remote-tracking branch 'origin/master' into greenbech/add-groun…
greenbech Jun 28, 2024
6d8a8b1
chore: Bump version again to 0.52.0
greenbech Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions react-components/src/hooks/useGroundPlaneFromScene.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -88,14 +89,10 @@ export const useGroundPlaneFromScene = (sceneExternalId: string, sceneSpaceId: s
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).multiply(CDF_TO_VIEWER_TRANSFORMATION);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cant we just convert Euler rotation to quaternion and apply to the mesh?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should also apply the scale. Isn't this what I'm doing? I am open to changing the syntax — do you have a concrete suggestion?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

   // Apply position from groundPlane
    mesh.position.set(groundPlane.position.x, groundPlane.position.y, groundPlane.position.z);

    // Convert Euler rotation to quaternion and apply to the mesh
    const euler = new Euler(groundPlane.rotation.x, groundPlane.rotation.y, groundPlane.rotation.z, groundPlane.rotation.order ?? 'XYZ');
    mesh.quaternion.setFromEuler(euler);

    // Apply scaling from groundPlane
    mesh.scale.set(groundPlane.scaleX, groundPlane.scaleY, groundPlane.scaleZ);

I feel this is much simpler, unless it causes an issue

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think below is much better than above suggestion

    // Apply position, rotation, and scale using matrix
    const matrix = new Matrix4();
    const position = new Vector3(groundPlane.position.x, groundPlane.position.y, groundPlane.position.z);
    const rotation = new Euler(groundPlane.rotation.x, groundPlane.rotation.y, groundPlane.rotation.z, groundPlane.rotation.order ?? 'XYZ');
    const scale = new Vector3(groundPlane.scaleX, groundPlane.scaleY, groundPlane.scaleZ);

    matrix.compose(position, new Quaternion().setFromEuler(rotation), scale);
    mesh.matrix.copy(matrix);
    matrix.decompose(mesh.position, mesh.quaternion, mesh.scale);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After chatting with @haakonflatval-cognite, I think maybe the simplest way of doing this is what I updated it to now:

      mesh.matrix.copy(matrix4);
      mesh.matrixAutoUpdate = false;

Do you agree?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

mesh.matrix.copy(matrix4);
matrix4.decompose(mesh.position, mesh.quaternion, mesh.scale);

const customObject = new CustomObject(mesh);
customObject.isPartOfBoundingBox = false;
Expand Down
30 changes: 30 additions & 0 deletions react-components/src/utilities/transformation3dToMatrix4.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/*!
* Copyright 2024 Cognite AS
*/

import { Euler, MathUtils, Matrix4 } from 'three';
import { type Transformation3d } from '../hooks/types';

export const transformation3dToMatrix4 = ({
translationX,
translationY,
translationZ,
eulerRotationX,
eulerRotationY,
eulerRotationZ,
scaleX,
scaleY,
scaleZ
}: Transformation3d): Matrix4 => {
return new Matrix4()
.makeTranslation(translationX, translationY, translationZ)
.makeRotationFromEuler(
new Euler(
MathUtils.degToRad(eulerRotationX),
MathUtils.degToRad(eulerRotationY),
MathUtils.degToRad(eulerRotationZ),
'XYZ'
)
)
.makeScale(scaleX, scaleY, scaleZ);
};
Loading