fix(composer): fix reparent rotation and add new object issues

awslabs · Apr 11, 2023 · 2628c29 · 2628c29
1 parent 52cab67
commit 2628c29
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 34 deletions.
diff --git a/packages/scene-composer/src/components/WebGLCanvasManager.tsx b/packages/scene-composer/src/components/WebGLCanvasManager.tsx
@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import * as awsui from '@awsui/design-tokens';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { GizmoHelper, GizmoViewport } from '@react-three/drei';
 import { ThreeEvent, useThree } from '@react-three/fiber';
 
@@ -42,7 +42,6 @@ export const WebGLCanvasManager: React.FC = () => {
   const environmentPreset = getSceneProperty(KnownSceneProperty.EnvironmentPreset);
   const matterportModelId = getSceneProperty(KnownSceneProperty.MatterportModelId);
   const rootNodeRefs = document.rootNodeRefs;
-  const [startingPointerPosition, setStartingPointerPosition] = useState<THREE.Vector2>(new THREE.Vector2());
 
   const editingTargetPlaneRef = useRef(null);
   const gridHelperRef = useRef<THREE.GridHelper>(null);
@@ -55,13 +54,8 @@ export const WebGLCanvasManager: React.FC = () => {
     }
   }, [environmentPreset]);
 
-  const onPointerDown = (e: ThreeEvent<PointerEvent>) => {
-    setStartingPointerPosition(new THREE.Vector2(e.screenX, e.screenY));
-  };
-
-  const onPointerUp = (e: ThreeEvent<MouseEvent>) => {
-    const currentPosition = new THREE.Vector2(e.screenX, e.screenY);
-    if (startingPointerPosition.distanceTo(currentPosition) <= MAX_CLICK_DISTANCE) {
+  const onClick = (e: ThreeEvent<MouseEvent>) => {
+    if (e.delta <= MAX_CLICK_DISTANCE) {
       if (addingWidget && e.intersections.length > 0) {
         const { position } = getIntersectionTransform(e.intersections[0]);
         const newWidgetNode = createNodeWithPositionAndNormal(addingWidget, position, new THREE.Vector3());
@@ -120,8 +114,7 @@ export const WebGLCanvasManager: React.FC = () => {
               ref={editingTargetPlaneRef}
               name='Ground'
               rotation={[THREE.MathUtils.degToRad(270), 0, 0]}
-              onPointerUp={onPointerUp}
-              onPointerDown={onPointerDown}
+              onClick={onClick}
               renderOrder={matterportModelId ? 1 : undefined}
             >
               <planeGeometry args={[1000, 1000]} />

diff --git a/...ne-composer/src/components/panels/SceneHierarchyPanel/SceneHierarchyDataProvider.spec.tsx b/...ne-composer/src/components/panels/SceneHierarchyPanel/SceneHierarchyDataProvider.spec.tsx
@@ -143,9 +143,9 @@ describe('SceneHierarchyDataProvider', () => {
                     1,
                   ],
                   "rotation": Array [
-                    0.8414709848078967,
-                    -0.45464871341284097,
-                    0.2919265817264288,
+                    1,
+                    1,
+                    1,
                   ],
                   "scale": Array [
                     1,
@@ -208,9 +208,9 @@ describe('SceneHierarchyDataProvider', () => {
                     1,
                   ],
                   "rotation": Array [
-                    0.8414709848078967,
-                    -0.45464871341284097,
-                    0.2919265817264288,
+                    1,
+                    1,
+                    1,
                   ],
                   "scale": Array [
                     6,

diff --git a/...s/scene-composer/src/components/panels/SceneHierarchyPanel/SceneHierarchyDataProvider.tsx b/...s/scene-composer/src/components/panels/SceneHierarchyPanel/SceneHierarchyDataProvider.tsx
@@ -115,7 +115,7 @@ const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selec
   const sceneComposerId = useSceneComposerId();
   const { document, removeSceneNode } = useStore(sceneComposerId)((state) => state);
   const { isEditing } = useStore(sceneComposerId)((state) => state);
-  const { updateSceneNodeInternal, updateDocumentInternal } = useSceneDocument(sceneComposerId);
+  const { updateSceneNodeInternal } = useSceneDocument(sceneComposerId);
   const selectedSceneNodeRef = useStore(sceneComposerId)((state) => state.selectedSceneNodeRef);
   const getSceneNodeByRef = useStore(sceneComposerId)((state) => state.getSceneNodeByRef);
   const getObject3DBySceneNodeRef = useStore(sceneComposerId)((state) => state.getObject3DBySceneNodeRef);
@@ -254,7 +254,7 @@ const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selec
         // Update the node position to remain in its world space
         partial.transform = {
           position: maintainedTransform.position.toArray(),
-          rotation: new Vector3(0, 0, 1).applyEuler(maintainedTransform.rotation).toArray(),
+          rotation: [maintainedTransform.rotation.x, maintainedTransform.rotation.y, maintainedTransform.rotation.z],
           scale: finalScale,
         };
       }

diff --git a/packages/scene-composer/src/components/three-fiber/ModelRefComponent/GLTFModelComponent.tsx b/packages/scene-composer/src/components/three-fiber/ModelRefComponent/GLTFModelComponent.tsx
@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { invalidate, ThreeEvent, useFrame, useThree } from '@react-three/fiber';
 import { SkeletonUtils } from 'three-stdlib';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
@@ -55,11 +55,6 @@ export const GLTFModelComponent: React.FC<GLTFModelProps> = ({
   const { isEditing, addingWidget, setAddingWidget, cursorLookAt, cursorVisible, setCursorVisible } =
     useEditorState(sceneComposerId);
 
-  const [startingPointerPosition, setStartingPointerPosition] = useState<THREE.Vector2>(new THREE.Vector2());
-
-  const [lastPointerMove, setLastPointerMove] = useState<number>(Date.now());
-
-  const CURSOR_VISIBILITY_TIMEOUT = 1000; // 1 second
   const MAX_CLICK_DISTANCE = 2;
 
   useEffect(() => {
@@ -138,7 +133,7 @@ export const GLTFModelComponent: React.FC<GLTFModelProps> = ({
       }
     });
 
-    if (Date.now() - lastPointerMove >= CURSOR_VISIBILITY_TIMEOUT && !addingWidget && cursorVisible) {
+    if (!addingWidget && cursorVisible) {
       setCursorVisible(false);
     }
   });
@@ -151,10 +146,6 @@ export const GLTFModelComponent: React.FC<GLTFModelProps> = ({
     scale = [factor, factor, factor];
   }
 
-  const onPointerDown = (e: ThreeEvent<PointerEvent>) => {
-    setStartingPointerPosition(new THREE.Vector2(e.screenX, e.screenY));
-  };
-
   const handleAddWidget = (e: ThreeEvent<MouseEvent>) => {
     if (addingWidget) {
       const hierarchicalParent = findNearestViableParentAncestorNodeRef(e.eventObject);
@@ -181,9 +172,8 @@ export const GLTFModelComponent: React.FC<GLTFModelProps> = ({
     }
   };
 
-  const onPointerUp = (e: ThreeEvent<MouseEvent>) => {
-    const currentPosition = new THREE.Vector2(e.screenX, e.screenY);
-    if (startingPointerPosition.distanceTo(currentPosition) <= MAX_CLICK_DISTANCE) {
+  const onClick = (e: ThreeEvent<MouseEvent>) => {
+    if (e.delta <= MAX_CLICK_DISTANCE) {
       if (isEditing() && addingWidget) {
         handleAddWidget(e);
       }
@@ -192,7 +182,7 @@ export const GLTFModelComponent: React.FC<GLTFModelProps> = ({
 
   return (
     <group name={getComponentGroupName(node.ref, 'GLTF_MODEL')} scale={scale} dispose={null}>
-      <primitive object={clonedModelScene} onPointerDown={onPointerDown} onPointerUp={onPointerUp} />
+      <primitive object={clonedModelScene} onClick={onClick} />
     </group>
   );
 };