@react-three/rapier 0.13.0 → 0.13.2

package/dist/declarations/src/components/Physics.d.ts

@@ -20,7 +20,9 @@ export interface RigidBodyState {
 }
 export declare type RigidBodyStateMap = Map<RigidBody["handle"], RigidBodyState>;
 export declare type WorldStepCallback = (worldApi: WorldApi) => void;
-export declare type WorldStepCallbackSet = Set<WorldStepCallback>;
+export declare type WorldStepCallbackSet = Set<{
+    current: WorldStepCallback;
+}>;
 export interface ColliderState {
     collider: Collider;
     object: Object3D;

package/dist/react-three-rapier.cjs.dev.js

@@ -477,11 +477,20 @@ const useColliderEvents = (getCollider, props, events) => {
   }, [onCollisionEnter, onCollisionExit, onIntersectionEnter, onIntersectionExit, onContactForce]);
 };
 
+const useMutableCallback = fn => {
+  const ref = React.useRef(fn);
+  React.useEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return ref;
+}; // External hooks
+
 /**
  * Exposes the Rapier context, and world
  * @category Hooks
  */
 
+
 const useRapier = () => {
   return React.useContext(rapierContext);
 };
@@ -494,10 +503,11 @@ const useBeforePhysicsStep = callback => {
   const {
     beforeStepCallbacks
   } = useRapier();
+  const ref = useMutableCallback(callback);
   React.useEffect(() => {
-    beforeStepCallbacks.add(callback);
+    beforeStepCallbacks.add(ref);
     return () => {
-      beforeStepCallbacks.delete(callback);
+      beforeStepCallbacks.delete(ref);
     };
   }, []);
 };
@@ -510,10 +520,11 @@ const useAfterPhysicsStep = callback => {
   const {
     afterStepCallbacks
   } = useRapier();
+  const ref = useMutableCallback(callback);
   React.useEffect(() => {
-    afterStepCallbacks.add(callback);
+    afterStepCallbacks.add(ref);
     return () => {
-      afterStepCallbacks.delete(callback);
+      afterStepCallbacks.delete(ref);
     };
   }, []);
 }; // Internal hooks
@@ -759,12 +770,12 @@ const Physics = ({
       }); // Trigger beforeStep callbacks
 
       beforeStepCallbacks.forEach(callback => {
-        callback(api);
+        callback.current(api);
       });
       world.step(eventQueue); // Trigger afterStep callbacks
 
       afterStepCallbacks.forEach(callback => {
-        callback(api);
+        callback.current(api);
       });
     };
 
@@ -1124,12 +1135,17 @@ const AnyCollider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((prop
   const getInstance = useImperativeInstance(() => {
     const worldScale = ref.current.getWorldScale(vec3());
     const collider = createColliderFromOptions(props, world, worldScale, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.getRigidBody);
-    colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
     return collider;
   }, collider => {
-    colliderStates.delete(collider.handle);
     world.removeCollider(collider);
   });
+  React.useEffect(() => {
+    const collider = getInstance();
+    colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
+    return () => {
+      colliderStates.delete(collider.handle);
+    };
+  }, []);
   React.useImperativeHandle(forwardedRef, () => getInstance());
   const mergedProps = React.useMemo(() => {
     return _objectSpread2(_objectSpread2({}, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options), props);
@@ -1431,21 +1447,27 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
       children: undefined
     });
   }, [physicsOptions, props]);
-  const childColliderProps = useChildColliderProps(ref, mergedOptions); // Create rigidbody
+  const childColliderProps = useChildColliderProps(ref, mergedOptions); // Provide a way to eagerly create rigidbody
 
   const getInstance = useImperativeInstance(() => {
     const desc = rigidBodyDescFromOptions(mergedOptions);
     const rigidBody = world.createRigidBody(desc);
+    return rigidBody;
+  }, rigidBody => {
+    world.removeRigidBody(rigidBody);
+  }); // Only provide a object state after the ref has been set
+
+  React.useEffect(() => {
+    const rigidBody = getInstance();
     const state = createRigidBodyState({
       rigidBody,
       object: ref.current
     });
     rigidBodyStates.set(rigidBody.handle, props.transformState ? props.transformState(state) : state);
-    return rigidBody;
-  }, rigidBody => {
-    world.removeRigidBody(rigidBody);
-    rigidBodyStates.delete(rigidBody.handle);
-  });
+    return () => {
+      rigidBodyStates.delete(rigidBody.handle);
+    };
+  }, []);
   useUpdateRigidBodyOptions(getInstance, mergedOptions, rigidBodyStates);
   useRigidBodyEvents(getInstance, mergedOptions, rigidBodyEvents);
   React.useImperativeHandle(forwardedRef, () => getInstance());

package/dist/react-three-rapier.cjs.prod.js

@@ -477,11 +477,20 @@ const useColliderEvents = (getCollider, props, events) => {
   }, [onCollisionEnter, onCollisionExit, onIntersectionEnter, onIntersectionExit, onContactForce]);
 };
 
+const useMutableCallback = fn => {
+  const ref = React.useRef(fn);
+  React.useEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return ref;
+}; // External hooks
+
 /**
  * Exposes the Rapier context, and world
  * @category Hooks
  */
 
+
 const useRapier = () => {
   return React.useContext(rapierContext);
 };
@@ -494,10 +503,11 @@ const useBeforePhysicsStep = callback => {
   const {
     beforeStepCallbacks
   } = useRapier();
+  const ref = useMutableCallback(callback);
   React.useEffect(() => {
-    beforeStepCallbacks.add(callback);
+    beforeStepCallbacks.add(ref);
     return () => {
-      beforeStepCallbacks.delete(callback);
+      beforeStepCallbacks.delete(ref);
     };
   }, []);
 };
@@ -510,10 +520,11 @@ const useAfterPhysicsStep = callback => {
   const {
     afterStepCallbacks
   } = useRapier();
+  const ref = useMutableCallback(callback);
   React.useEffect(() => {
-    afterStepCallbacks.add(callback);
+    afterStepCallbacks.add(ref);
     return () => {
-      afterStepCallbacks.delete(callback);
+      afterStepCallbacks.delete(ref);
     };
   }, []);
 }; // Internal hooks
@@ -759,12 +770,12 @@ const Physics = ({
       }); // Trigger beforeStep callbacks
 
       beforeStepCallbacks.forEach(callback => {
-        callback(api);
+        callback.current(api);
       });
       world.step(eventQueue); // Trigger afterStep callbacks
 
       afterStepCallbacks.forEach(callback => {
-        callback(api);
+        callback.current(api);
       });
     };
 
@@ -1124,12 +1135,17 @@ const AnyCollider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((prop
   const getInstance = useImperativeInstance(() => {
     const worldScale = ref.current.getWorldScale(vec3());
     const collider = createColliderFromOptions(props, world, worldScale, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.getRigidBody);
-    colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
     return collider;
   }, collider => {
-    colliderStates.delete(collider.handle);
     world.removeCollider(collider);
   });
+  React.useEffect(() => {
+    const collider = getInstance();
+    colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
+    return () => {
+      colliderStates.delete(collider.handle);
+    };
+  }, []);
   React.useImperativeHandle(forwardedRef, () => getInstance());
   const mergedProps = React.useMemo(() => {
     return _objectSpread2(_objectSpread2({}, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options), props);
@@ -1431,21 +1447,27 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
       children: undefined
     });
   }, [physicsOptions, props]);
-  const childColliderProps = useChildColliderProps(ref, mergedOptions); // Create rigidbody
+  const childColliderProps = useChildColliderProps(ref, mergedOptions); // Provide a way to eagerly create rigidbody
 
   const getInstance = useImperativeInstance(() => {
     const desc = rigidBodyDescFromOptions(mergedOptions);
     const rigidBody = world.createRigidBody(desc);
+    return rigidBody;
+  }, rigidBody => {
+    world.removeRigidBody(rigidBody);
+  }); // Only provide a object state after the ref has been set
+
+  React.useEffect(() => {
+    const rigidBody = getInstance();
     const state = createRigidBodyState({
       rigidBody,
       object: ref.current
     });
     rigidBodyStates.set(rigidBody.handle, props.transformState ? props.transformState(state) : state);
-    return rigidBody;
-  }, rigidBody => {
-    world.removeRigidBody(rigidBody);
-    rigidBodyStates.delete(rigidBody.handle);
-  });
+    return () => {
+      rigidBodyStates.delete(rigidBody.handle);
+    };
+  }, []);
   useUpdateRigidBodyOptions(getInstance, mergedOptions, rigidBodyStates);
   useRigidBodyEvents(getInstance, mergedOptions, rigidBodyEvents);
   React.useImperativeHandle(forwardedRef, () => getInstance());

package/dist/react-three-rapier.esm.js

@@ -452,11 +452,20 @@ const useColliderEvents = (getCollider, props, events) => {
   }, [onCollisionEnter, onCollisionExit, onIntersectionEnter, onIntersectionExit, onContactForce]);
 };
 
+const useMutableCallback = fn => {
+  const ref = useRef(fn);
+  useEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return ref;
+}; // External hooks
+
 /**
  * Exposes the Rapier context, and world
  * @category Hooks
  */
 
+
 const useRapier = () => {
   return useContext(rapierContext);
 };
@@ -469,10 +478,11 @@ const useBeforePhysicsStep = callback => {
   const {
     beforeStepCallbacks
   } = useRapier();
+  const ref = useMutableCallback(callback);
   useEffect(() => {
-    beforeStepCallbacks.add(callback);
+    beforeStepCallbacks.add(ref);
     return () => {
-      beforeStepCallbacks.delete(callback);
+      beforeStepCallbacks.delete(ref);
     };
   }, []);
 };
@@ -485,10 +495,11 @@ const useAfterPhysicsStep = callback => {
   const {
     afterStepCallbacks
   } = useRapier();
+  const ref = useMutableCallback(callback);
   useEffect(() => {
-    afterStepCallbacks.add(callback);
+    afterStepCallbacks.add(ref);
     return () => {
-      afterStepCallbacks.delete(callback);
+      afterStepCallbacks.delete(ref);
     };
   }, []);
 }; // Internal hooks
@@ -734,12 +745,12 @@ const Physics = ({
       }); // Trigger beforeStep callbacks
 
       beforeStepCallbacks.forEach(callback => {
-        callback(api);
+        callback.current(api);
       });
       world.step(eventQueue); // Trigger afterStep callbacks
 
       afterStepCallbacks.forEach(callback => {
-        callback(api);
+        callback.current(api);
       });
     };
 
@@ -1099,12 +1110,17 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwarded
   const getInstance = useImperativeInstance(() => {
     const worldScale = ref.current.getWorldScale(vec3());
     const collider = createColliderFromOptions(props, world, worldScale, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.getRigidBody);
-    colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
     return collider;
   }, collider => {
-    colliderStates.delete(collider.handle);
     world.removeCollider(collider);
   });
+  useEffect(() => {
+    const collider = getInstance();
+    colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
+    return () => {
+      colliderStates.delete(collider.handle);
+    };
+  }, []);
   useImperativeHandle(forwardedRef, () => getInstance());
   const mergedProps = useMemo(() => {
     return _objectSpread2(_objectSpread2({}, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options), props);
@@ -1406,21 +1422,27 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
       children: undefined
     });
   }, [physicsOptions, props]);
-  const childColliderProps = useChildColliderProps(ref, mergedOptions); // Create rigidbody
+  const childColliderProps = useChildColliderProps(ref, mergedOptions); // Provide a way to eagerly create rigidbody
 
   const getInstance = useImperativeInstance(() => {
     const desc = rigidBodyDescFromOptions(mergedOptions);
     const rigidBody = world.createRigidBody(desc);
+    return rigidBody;
+  }, rigidBody => {
+    world.removeRigidBody(rigidBody);
+  }); // Only provide a object state after the ref has been set
+
+  useEffect(() => {
+    const rigidBody = getInstance();
     const state = createRigidBodyState({
       rigidBody,
       object: ref.current
     });
     rigidBodyStates.set(rigidBody.handle, props.transformState ? props.transformState(state) : state);
-    return rigidBody;
-  }, rigidBody => {
-    world.removeRigidBody(rigidBody);
-    rigidBodyStates.delete(rigidBody.handle);
-  });
+    return () => {
+      rigidBodyStates.delete(rigidBody.handle);
+    };
+  }, []);
   useUpdateRigidBodyOptions(getInstance, mergedOptions, rigidBodyStates);
   useRigidBodyEvents(getInstance, mergedOptions, rigidBodyEvents);
   useImperativeHandle(forwardedRef, () => getInstance());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",

package/readme.md

@@ -12,7 +12,7 @@
 <br />
 For contributions, please read the <a href="https://github.com/pmndrs/react-three-rapier/blob/main/packages/react-three-rapier/CONTRIBUTING.md">🪧 Contribution Guide</a>.
 <br/>
-For available APIs, see <a href="https://pmndrs.github.io/react-three-rapier/>">🧩 API Docs</a>
+For available APIs, see <a href="https://pmndrs.github.io/react-three-rapier/">🧩 API Docs</a>
 </p>
 
 ---
@@ -66,6 +66,7 @@ For full API outline and documentation, see 🧩 [API Docs](https://pmndrs.githu
 - [Collider Components](#collider-components)
   - [🖼 Collider Examples](#-collider-examples)
 - [Instanced Meshes](#instanced-meshes)
+- [Debug](#debug)
 - [Moving things around, and applying forces](#moving-things-around-and-applying-forces)
 - [Collision Events](#collision-events)
   - [Configuring collision and solver groups](#configuring-collision-and-solver-groups)
@@ -80,7 +81,6 @@ For full API outline and documentation, see 🧩 [API Docs](https://pmndrs.githu
   - [Spherical Joint](#spherical-joint)
   - [Revolute Joint](#revolute-joint)
   - [Prismatic Joint](#prismatic-joint)
-  - [Joint APIs](#joint-apis)
   - [🖼 Joints Example](#-joints-example)
 - [Advanced hooks usage](#advanced-hooks-usage)
   - [Manual stepping](#manual-stepping)
@@ -256,11 +256,12 @@ const Scene = () => {
     }
 
     // You can access individual instanced by their index
-    rigidBodies.current.at(40).applyImpulse({ x: 0, y: 10, z: 0 });
+    rigidBodies.current[40].applyImpulse({ x: 0, y: 10, z: 0 }, true);
+    rigidBodies.at(100).applyImpulse({ x: 0, y: 10, z: 0 }, true);
 
     // Or update all instances
     rigidBodies.current.forEach((api) => {
-      api.applyImpulse({ x: 0, y: 10, z: 0 });
+      api.applyImpulse({ x: 0, y: 10, z: 0 }, true);
     });
   }, []);
 
@@ -329,8 +330,6 @@ const Scene = () => {
   );
 };
 ```
-}
-```
 
 ## Debug
 
@@ -590,8 +589,6 @@ To detect when a collider enters or leaves another collider, you can use the `on
 
 🧩 See [onIntersectionEnter / onIntersectionExit docs](https://pmndrs.github.io/react-three-rapier/interfaces/RigidBodyProps.html#onIntersectionEnter) for more information.
 
-```tsx
-
 ```tsx
 <RigidBody>
   <GoalPosts />
@@ -674,7 +671,8 @@ There are 4 different joint types available:
 - Revolute (two bodies are connected by a hinge, for things like doors or wheels)
 - Prismatic (two bodies are connected by a sliding joint, for things like pistons or sliders)
 
-Each joint hook returns a RefObject containing the raw reference to the hook instance.  
+Each joint hook returns a RefObject containing the raw reference to the joint instance.  
+
 ```tsx
 const WheelJoint = ({bodyA, bodyB}) => {
   const joint = useRevoluteJoint(bodyA, bodyB, [[0,0,0],[0,0,0],[0,0,0]])
@@ -724,8 +722,6 @@ The spherical joint ensures that two points on the local-spaces of two rigid-bod
 
 🧩 See [SphericalJoint docs](https://pmndrs.github.io/react-three-rapier/functions/useSphericalJoint.html) for available options.
 
-```tsx
-
 ```tsx
 const JointedThing = () => {
   const joint = useSphericalJoint(
@@ -789,8 +785,6 @@ The prismatic joint prevents any relative movement between two rigid-bodies, exc
 
 🧩 See [PrismaticJoint docs](https://pmndrs.github.io/react-three-rapier/functions/usePrismaticJoint.html) for available options.
 
-```tsx
-
 ```tsx
 const JointedThing = () => {
   const joint = usePrismaticJoint(
@@ -815,27 +809,6 @@ const JointedThing = () => {
 }
 ```
 
-### Joint APIs
-Joints can be controlled imperatively similarily to how `RigidBody` components can be controlled.
-
-🧩 See [Joint API docs](https://pmndrs.github.io/react-three-rapier/interfaces/JointApi.html) for more information.
-
-```tsx
-const JointedThing = () => { 
-  const joint = useSphericalJoint(...)
-
-  useEffect(() => {
-    joint.configureMotorVelocity(1, 0)
-
-    // Disable contacts between the two joint bodies
-    joint.setContactsEnabled(false)
-  }, [])
-
-  return ...
-}
-```
-
-
 ### 🖼 Joints Example
 <a href="https://codesandbox.io/s/react-three-rapier-joints-mhhbd4"><img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/example-joints.jpg" width="240" /></a>