feat(core) Add support of detachOnGrab in DistanceGrabbable component.

Summary: Support detachOnGrab in DistanceGrabbable component to allow detaching the object from its parents when grabbed.

Reviewed By: felixtrz

Differential Revision: D89236264

fbshipit-source-id: ca1d8915ceefc2a8b1cd4a01ac5ad5931cf11af3

Author: zjm-meta

examples/grab/metaspatial/Composition/Main.scene

@@ -47,9 +47,9 @@ entities:
       tag: Environment
     - components:
         com.iwsdk.components.DistanceGrabbable:
-          translate: false
-          movementMode: 3
           scale: false
+          movementMode: 3
+          translate: false
         com.iwsdk.components.Interactable:
           {}
         com.meta.components.Animatable:
@@ -81,15 +81,16 @@ entities:
       tag: earth
     - components:
         com.iwsdk.components.DistanceGrabbable:
-          targetPositionOffset:
-            - 0.100000001
-            - 0
-            - 0
+          detachOnGrab: true
           targetQuaternionOffset:
             - 0
             - 120
             - 0
             - 1
+          targetPositionOffset:
+            - 0.100000001
+            - 0
+            - 0
         com.iwsdk.components.Interactable:
           {}
         com.meta.components.Animatable:
@@ -206,7 +207,8 @@ entities:
       tag: pin3
     - components:
         com.iwsdk.components.DistanceGrabbable:
-          {}
+          movementMode: 0
+          detachOnGrab: true
         com.iwsdk.components.Interactable:
           {}
         com.meta.components.Animatable:
@@ -272,16 +274,16 @@ entities:
       tag: opera_house
     - components:
         com.iwsdk.components.DistanceGrabbable:
-          targetPositionOffset:
-            - 0
-            - 0.300000012
-            - 0
-          moveSpeedFactor: 0.5
           targetQuaternionOffset:
             - 12
             - 0
             - 0
             - 1
+          moveSpeedFactor: 0.5
+          targetPositionOffset:
+            - 0
+            - 0.300000012
+            - 0
         com.iwsdk.components.Interactable:
           {}
         com.meta.components.Animatable:

packages/core/src/grab/distance-grabbable.ts

@@ -110,6 +110,8 @@ export const DistanceGrabbable = createComponent(
     },
     /** A boolean value to set whether the object snap back to its original position and rotation. */
     returnToOrigin: { type: Types.Boolean, default: false },
+    /** A boolean value to set whether the object will be detached from its parent and attach to the scene/Level root when grabbed. */
+    detachOnGrab: { type: Types.Boolean, default: false },
     /** Object movement and rotation speed factor for the MoveTowardsTarget movement mode with a scale from 0 to 1. */
     moveSpeedFactor: { type: Types.Float32, default: 0.1 },
     /** Target position offset relative to the input source for MoveTowardsTarget mode in [x, y, z]. */

packages/core/src/grab/grab-system.ts

@@ -18,6 +18,7 @@ import { DistanceGrabbable } from './distance-grabbable.js';
 import { DistanceGrabHandle, MovementMode, Handle } from './handles.js';
 import { OneHandGrabbable } from './one-hand-grabbable.js';
 import { TwoHandsGrabbable } from './two-hands-grabbable.js';
+import { LevelTag } from '../level/index.js';
 
 /**
  * Manages interactive object grabbing and manipulation for VR/AR experiences.
@@ -241,6 +242,9 @@ export class GrabSystem extends createSystem(
     const object = entity.object3D;
     if (!(object instanceof Object3D)) return;
     const obj = object as Object3D<PointerEventsMap & Object3DEventMap>;
+    const rootEntity = entity.hasComponent(LevelTag)
+                ? this.world.activeLevel.value
+                : this.world.sceneEntity;
     const rotateMax = entity.getVectorView(DistanceGrabbable, 'rotateMax');
     const rotateMin = entity.getVectorView(DistanceGrabbable, 'rotateMin');
     const translateMax = entity.getVectorView(
@@ -257,6 +261,9 @@ export class GrabSystem extends createSystem(
     const returnToOrigin = Boolean(
       entity.getValue(DistanceGrabbable, 'returnToOrigin'),
     );
+    const detachOnGrab = Boolean(
+      entity.getValue(DistanceGrabbable, 'detachOnGrab'),
+    );
     const targetPosOffset = entity.getVectorView(
       DistanceGrabbable,
       'targetPositionOffset',
@@ -297,6 +304,7 @@ export class GrabSystem extends createSystem(
     });
     const handle = new DistanceGrabHandle(
       obj,
+      rootEntity.object3D!,
       opts,
       movementMode!,
       returnToOrigin,
@@ -308,6 +316,7 @@ export class GrabSystem extends createSystem(
         targetQuatOffset[2],
         targetQuatOffset[3],
       ),
+      detachOnGrab,
     );
     handle.bind(obj);
     obj.pointerEventsType = { deny: 'grab' };

packages/core/src/grab/handles.ts

@@ -43,12 +43,14 @@ export class DistanceGrabHandle<T> extends HandleStore<T> {
 
   constructor(
     readonly target_: Object3D | { current?: Object3D | null },
+    readonly sceneRoot_: Object3D,
     public readonly getOptions: () => HandleOptions<T> = () => ({}),
     public readonly movementMode: string,
-    public readonly returnToOrigin: Boolean,
+    public readonly returnToOrigin: boolean,
     public readonly moveSpeedFactor: number = 0.1,
     public readonly targetPosOffset: Vector3 = new Vector3(0, 0, 0),
     public readonly targetQuatOffset: Quaternion = new Quaternion(0, 0, 0, 1),
+    public readonly detachOnGrab: boolean,
   ) {
     super(target_, getOptions);
 
@@ -60,14 +62,6 @@ export class DistanceGrabHandle<T> extends HandleStore<T> {
   }
 
   update(time: number) {
-    if (
-      this.movementMode === MovementMode.RotateAtSource ||
-      this.movementMode === MovementMode.MoveFromTarget
-    ) {
-      super.update(time);
-      return;
-    }
-
     const target = this.getTarget();
 
     if (
@@ -82,6 +76,18 @@ export class DistanceGrabHandle<T> extends HandleStore<T> {
       return;
     }
 
+    if (this.detachOnGrab && target.parent != this.sceneRoot_) {
+      this.sceneRoot_.attach(target);
+    }
+
+    if (
+      this.movementMode === MovementMode.RotateAtSource ||
+      this.movementMode === MovementMode.MoveFromTarget
+    ) {
+      super.update(time);
+      return;
+    }
+
     const pointerAmount = this.inputState.size;
     target.getWorldPosition(DistanceGrabHandle._posHelper);
     target.getWorldQuaternion(DistanceGrabHandle._quatHelper);