add wake up delay after visible change

Author: ErdongChen-Andrew

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecctrl",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "author": "Erdong Chen",
   "license": "MIT",
   "description": "A floating rigibody character controller for R3F",

readme.md

@@ -150,6 +150,7 @@ EcctrlProps: {
   camFollowMult: 11, // Camera follow speed multiplier
   fallingGravityScale: 2.5, // Character is falling, apply higher gravity
   fallingMaxVel: -20, // Limit character max falling velocity
+  wakeUpDelay: 200, // Wake up character delay time after window visibility change to visible (in ms)
   // Floating Ray setups
   rayOriginOffest: { x: 0, y: -capsuleHalfHeight, z: 0 }, // Ray origin offset
   rayHitForgiveness: 0.1, // Ray hit forgiveness
@@ -410,12 +411,25 @@ const releaseAllButtons = useJoystickControls(
   (state) => state.releaseAllButtons
 );
 //...
-// call the proper fuctions 
-setJoystick(joystickDis, joystickAng, runState)
+// call the proper fuctions
+setJoystick(joystickDis, joystickAng, runState);
 // or
 pressButton1();
 ```
 
+### (Optional) First-person view setup
+
+If you would like to quickly set up a first-person mode, you can modify these props to achieve that:
+
+```js
+<Ecctrl
+  camInitDis={-0.01} // camera intial position
+  camMinDis={-0.01} // camera zoom in closest position
+  camFollowMult={100} // give any big number here, so the camera follows the character instantly
+  autoBalance={false} // turn off auto balance since it's not useful for the first-person view
+>
+```
+
 ## Contributions
 
 I appreciate your interest in this project! If you have any feedback, suggestions, or resources related to the controller, please feel free to share.

src/Ecctrl.tsx

@@ -81,6 +81,7 @@ const Ecctrl = forwardRef<RapierRigidBody, EcctrlProps>(({
   camFollowMult = 11,
   fallingGravityScale = 2.5,
   fallingMaxVel = -20,
+  wakeUpDelay = 200,
   // Floating Ray setups
   rayOriginOffest = { x: 0, y: -capsuleHalfHeight, z: 0 },
   rayHitForgiveness = 0.1,
@@ -407,7 +408,7 @@ const Ecctrl = forwardRef<RapierRigidBody, EcctrlProps>(({
   // can jump setup
   let canJump = false;
   let isFalling = false;
-  const initialGravityScale = useMemo(() => props.gravityScale || 1, [])
+  const initialGravityScale: number = useMemo(() => props.gravityScale || 1, [])
 
   // on moving object state
   let isOnMovingObject = false;
@@ -654,7 +655,13 @@ const Ecctrl = forwardRef<RapierRigidBody, EcctrlProps>(({
    * Character sleep function
    */
   const sleepCharacter = () => {
-    characterRef.current.sleep()
+    if (document.visibilityState === "hidden") {
+      characterRef.current.sleep()
+    } else {
+      setTimeout(() => {
+        characterRef.current.wakeUp()
+      }, wakeUpDelay)
+    }
   }
 
   useEffect(() => {
@@ -780,10 +787,10 @@ const Ecctrl = forwardRef<RapierRigidBody, EcctrlProps>(({
     pivot.rotation.y = camInitDir.y
     pivot.rotation.z = camInitDir.z
 
-    window.addEventListener("blur", sleepCharacter);
+    window.addEventListener("visibilitychange", sleepCharacter);
 
     return () => {
-      window.removeEventListener("blur", sleepCharacter);
+      window.removeEventListener("visibilitychange", sleepCharacter);
     }
   }, [])
 
@@ -1216,6 +1223,7 @@ export interface EcctrlProps extends RigidBodyProps {
   camFollowMult?: number;
   fallingGravityScale?: number;
   fallingMaxVel?: number;
+  wakeUpDelay?: number;
   // Floating Ray setups
   rayOriginOffest?: { x: number; y: number; z: number };
   rayHitForgiveness?: number;