feat: point to move mode

Author: ErdongChen-Andrew

example/CharacterModel.tsx

@@ -36,6 +36,7 @@ export default function CharacterModel(props: CharacterModelProps) {
   const rightHandPos = useMemo(() => new THREE.Vector3(), []);
   const leftHandPos = useMemo(() => new THREE.Vector3(), []);
   const bodyPos = useMemo(() => new THREE.Vector3(), []);
+  const bodyRot = useMemo(() => new THREE.Quaternion(), []);
   let rightHand: THREE.Object3D = null;
   let leftHand: THREE.Object3D = null;
   let mugModel: THREE.Object3D = null;
@@ -130,20 +131,25 @@ export default function CharacterModel(props: CharacterModelProps) {
 
   useFrame(() => {
     if (curAnimation === animationSet.action4) {
-      if (rightHand && leftHand) {
+      if (rightHand) {
         rightHand.getWorldPosition(rightHandPos);
-        leftHand.getWorldPosition(leftHandPos);
-        rightHandRef.current.parent.getWorldPosition(bodyPos);
+        group.current.getWorldPosition(bodyPos);
+        group.current.getWorldQuaternion(bodyRot);
       }
 
-      // Apply both hands position to hand colliders
-      if (rightHandColliderRef.current && leftHandColliderRef.current) {
-        rightHandRef.current.position.copy(rightHandPos).sub(bodyPos);
+      // Apply hands position to hand colliders
+      if (rightHandColliderRef.current) {
+        // check if parent group autobalance is on or off
+        if (group.current.parent.quaternion.y === 0 && group.current.parent.quaternion.w === 1) {
+          rightHandRef.current.position.copy(rightHandPos).sub(bodyPos).applyQuaternion(bodyRot.conjugate());
+        } else {
+          rightHandRef.current.position.copy(rightHandPos).sub(bodyPos);
+        }
         rightHandColliderRef.current.setTranslationWrtParent(
           rightHandRef.current.position
         );
       }
-    } 
+    }
   });
 
   useEffect(() => {
@@ -190,7 +196,7 @@ export default function CharacterModel(props: CharacterModelProps) {
       (action as any)._mixer._listeners = [];
 
       // Move hand collider back to initial position after action
-      if (curAnimation===animationSet.action4) {
+      if (curAnimation === animationSet.action4) {
         if (rightHandColliderRef.current) {
           rightHandColliderRef.current.setTranslationWrtParent(vec3({ x: 0, y: 0, z: 0 }))
         }

example/Experience.tsx

@@ -64,6 +64,8 @@ export default function Experience() {
             dampingC={0.2}
             autoBalanceSpringK={1.2}
             autoBalanceDampingC={0.04}
+            autoBalanceSpringOnY={0.7}
+            autoBalanceDampingOnY={0.05}
           >
             {/* Replace your model here */}
             <CharacterModel />

example/index.tsx

@@ -4,7 +4,7 @@ import { Canvas } from "@react-three/fiber";
 import Experience from "../example/Experience";
 import { Leva } from "leva";
 import { EcctrlJoystick } from "../src/EcctrlJoystick";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 
 const root = ReactDOM.createRoot(document.querySelector("#root"));
 
@@ -43,7 +43,9 @@ root.render(
         }
       }}
     >
-      <Experience />
+      <Suspense fallback={null}>
+        <Experience />
+      </Suspense>
     </Canvas>
   </>
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecctrl",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "author": "Erdong Chen",
   "license": "MIT",
   "description": "A floating rigibody character controller for R3F",
@@ -33,23 +33,21 @@
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.8",
     "@vitejs/plugin-react": "^4.1.0",
-    "r3f-perf": "^7.1.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "three": "^0.153.0",
     "typescript": "^5.2.2",
     "vite": "^4.3.9"
   },
   "dependencies": {
-    "@react-three/drei": "^9",
-    "@react-three/rapier": "^1",
-    "leva": "^0.9.34",
-    "zustand": "^4.4.1"
+    "leva": "^0.9.34", 
+    "r3f-perf": "^7.1.2"
   },
   "peerDependencies": {
     "@react-three/fiber": "^8.13.3",
+    "@react-three/drei": "^9",
+    "@react-three/rapier": "^1",
     "react": ">=18",
-    "three": ">=0.133"
+    "react-dom": ">=18.0",
+    "three": ">=0.153",
+    "zustand": "^4.4.1"
   },
   "scripts": {
     "dev": "vite",