@react-three/rapier 0.7.1 → 0.7.2

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

@@ -63,11 +63,13 @@ interface RapierWorldProps {
     /**
      * Set the timestep for the simulation.
      * Setting this to a number (eg. 1/60) will run the
-     * simulation at that framerate.
+     * simulation at that framerate. Alternatively, you can set this to
+     * "vary", which will cause the simulation to always synchronize with
+     * the current frame delta times.
      *
      * @defaultValue 1/60
      */
-    timeStep?: number;
+    timeStep?: number | "vary";
     /**
      * Pause the physics simulation
      *

package/dist/declarations/src/types.d.ts

@@ -118,11 +118,11 @@ export interface UseColliderOptions<ColliderArgs extends Array<unknown>> {
     /**
      * The position of this collider relative to the rigid body
      */
-    position?: Vector3Array;
+    position?: Object3DProps['position'];
     /**
      * The rotation of this collider relative to the rigid body
      */
-    rotation?: Vector3Array;
+    rotation?: Object3DProps['rotation'];
     /**
      * The rotation, as a Quaternion, of this collider relative to the rigid body
      */
@@ -219,11 +219,11 @@ export interface UseRigidBodyOptions extends ColliderProps {
     /**
      * Initial position of the RigidBody
      */
-    position?: Vector3Array;
+    position?: Object3DProps['position'];
     /**
      * Initial rotation of the RigidBody
      */
-    rotation?: Vector3Array;
+    rotation?: Object3DProps['rotation'];
     /**
      * Automatically generate colliders based on meshes inside this
      * rigid body.

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

@@ -267,27 +267,38 @@ const Physics = ({
   const [steppingState] = React.useState({
     accumulator: 0
   });
+  /* Check if the timestep is supposed to be variable. We'll do this here
+  once so we don't have to string-check every frame. */
+
+  const timeStepVariable = _timeStep === "vary";
   fiber.useFrame((_, dt) => {
     const world = worldRef.current;
     if (!world) return;
-    world.timestep = _timeStep;
     /**
      * Fixed timeStep simulation progression
      * @see https://gafferongames.com/post/fix_your_timestep/
     */
-    // don't step time forwards if paused
-    // Increase accumulator
 
-    steppingState.accumulator += _paused ? 0 : MathUtils.clamp(dt, 0, 0.2);
+    const clampedDelta = MathUtils.clamp(dt, 0, 0.2);
+
+    if (timeStepVariable) {
+      world.timestep = clampedDelta;
+      if (!_paused) world.step(eventQueue);
+    } else {
+      world.timestep = _timeStep; // don't step time forwards if paused
+      // Increase accumulator
+
+      steppingState.accumulator += _paused ? 0 : clampedDelta;
 
-    if (!_paused) {
-      while (steppingState.accumulator >= _timeStep) {
-        world.step(eventQueue);
-        steppingState.accumulator -= _timeStep;
+      if (!_paused) {
+        while (steppingState.accumulator >= _timeStep) {
+          world.step(eventQueue);
+          steppingState.accumulator -= _timeStep;
+        }
       }
     }
 
-    const interpolationAlpha = steppingState.accumulator % _timeStep / _timeStep; // Update meshes
+    const interpolationAlpha = timeStepVariable ? 1 : steppingState.accumulator % _timeStep / _timeStep; // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -947,7 +958,7 @@ const useChildColliderProps = (ref, options, ignoreMeshColliders = true) => {
         ignoreMeshColliders
       }));
     }
-  }, [options]);
+  }, [options.colliders]);
   return colliderProps;
 };
 const useRigidBody = (options = {}) => {
@@ -1209,12 +1220,13 @@ const RigidBody = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   const [object, api, childColliderProps] = useRigidBody(props);
   React.useImperativeHandle(ref, () => api);
+  const contextValue = React.useMemo(() => ({
+    ref: object,
+    api,
+    options: props
+  }), [object, api, props]);
   return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
-    value: {
-      ref: object,
-      api,
-      options: props
-    }
+    value: contextValue
   }, /*#__PURE__*/React__default["default"].createElement("object3D", _extends({
     ref: object
   }, objectProps, {
@@ -1449,6 +1461,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
         options = _objectWithoutProperties(props, _excluded);
 
   const instancesRef = React.useRef([]);
+  const rigidBodyRefs = React.useRef([]);
   const instancesRefGetter = React.useRef(() => {
     if (!instancesRef.current) {
       instancesRef.current = [];
@@ -1462,7 +1475,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
   const childColliderProps = useChildColliderProps(object, mergedOptions);
   React.useLayoutEffect(() => {
     object.current.updateWorldMatrix(true, false);
-    const rigidBodies = instancesRefGetter.current();
+    const instances = instancesRefGetter.current();
     const invertedWorld = object.current.matrixWorld.clone().invert();
     object.current.traverseVisible(mesh => {
       if (mesh instanceof three.InstancedMesh) {
@@ -1474,6 +1487,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
 
           const desc = rigidBodyDescFromOptions(props);
           const rigidBody = world.createRigidBody(desc);
+          rigidBodyRefs.current.push(rigidBody);
           const scale = ((_options$scales = options.scales) === null || _options$scales === void 0 ? void 0 : _options$scales[index]) || [1, 1, 1];
           const instanceScale = worldScale.clone().multiply(vectorArrayToVector3(scale));
           rigidBodyStates.set(rigidBody.handle, createRigidBodyState({
@@ -1504,7 +1518,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
             }
 
           });
-          rigidBodies.push({
+          instances.push({
             rigidBody,
             api
           });
@@ -1512,31 +1526,27 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     });
     return () => {
-      rigidBodies.forEach(rb => {
+      instances.forEach(rb => {
         world.removeRigidBody(rb.rigidBody);
         rigidBodyStates.delete(rb.rigidBody.handle);
       });
+      rigidBodyRefs.current = [];
       instancesRef.current = [];
     };
   }, []);
   const api = React.useMemo(() => createInstancedRigidBodiesApi(instancesRefGetter), []);
   React.useImperativeHandle(ref, () => api);
-  useUpdateRigidBodyOptions({
-    current: instancesRef.current.map(({
-      rigidBody
-    }) => rigidBody)
-  }, mergedOptions, rigidBodyStates, false);
-  useRigidBodyEvents({
-    current: instancesRef.current.map(({
-      rigidBody
-    }) => rigidBody)
-  }, mergedOptions, rigidBodyEvents);
-  return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
-    value: {
+  useUpdateRigidBodyOptions(rigidBodyRefs, mergedOptions, rigidBodyStates, false);
+  useRigidBodyEvents(rigidBodyRefs, mergedOptions, rigidBodyEvents);
+  const contextValue = React.useMemo(() => {
+    return {
       ref: object,
       api,
-      options: props
-    }
+      options: mergedOptions
+    };
+  }, [api, mergedOptions]);
+  return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/React__default["default"].createElement("object3D", {
     ref: object
   }, props.children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({

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

@@ -267,27 +267,38 @@ const Physics = ({
   const [steppingState] = React.useState({
     accumulator: 0
   });
+  /* Check if the timestep is supposed to be variable. We'll do this here
+  once so we don't have to string-check every frame. */
+
+  const timeStepVariable = _timeStep === "vary";
   fiber.useFrame((_, dt) => {
     const world = worldRef.current;
     if (!world) return;
-    world.timestep = _timeStep;
     /**
      * Fixed timeStep simulation progression
      * @see https://gafferongames.com/post/fix_your_timestep/
     */
-    // don't step time forwards if paused
-    // Increase accumulator
 
-    steppingState.accumulator += _paused ? 0 : MathUtils.clamp(dt, 0, 0.2);
+    const clampedDelta = MathUtils.clamp(dt, 0, 0.2);
+
+    if (timeStepVariable) {
+      world.timestep = clampedDelta;
+      if (!_paused) world.step(eventQueue);
+    } else {
+      world.timestep = _timeStep; // don't step time forwards if paused
+      // Increase accumulator
+
+      steppingState.accumulator += _paused ? 0 : clampedDelta;
 
-    if (!_paused) {
-      while (steppingState.accumulator >= _timeStep) {
-        world.step(eventQueue);
-        steppingState.accumulator -= _timeStep;
+      if (!_paused) {
+        while (steppingState.accumulator >= _timeStep) {
+          world.step(eventQueue);
+          steppingState.accumulator -= _timeStep;
+        }
       }
     }
 
-    const interpolationAlpha = steppingState.accumulator % _timeStep / _timeStep; // Update meshes
+    const interpolationAlpha = timeStepVariable ? 1 : steppingState.accumulator % _timeStep / _timeStep; // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -947,7 +958,7 @@ const useChildColliderProps = (ref, options, ignoreMeshColliders = true) => {
         ignoreMeshColliders
       }));
     }
-  }, [options]);
+  }, [options.colliders]);
   return colliderProps;
 };
 const useRigidBody = (options = {}) => {
@@ -1209,12 +1220,13 @@ const RigidBody = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   const [object, api, childColliderProps] = useRigidBody(props);
   React.useImperativeHandle(ref, () => api);
+  const contextValue = React.useMemo(() => ({
+    ref: object,
+    api,
+    options: props
+  }), [object, api, props]);
   return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
-    value: {
-      ref: object,
-      api,
-      options: props
-    }
+    value: contextValue
   }, /*#__PURE__*/React__default["default"].createElement("object3D", _extends({
     ref: object
   }, objectProps, {
@@ -1449,6 +1461,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
         options = _objectWithoutProperties(props, _excluded);
 
   const instancesRef = React.useRef([]);
+  const rigidBodyRefs = React.useRef([]);
   const instancesRefGetter = React.useRef(() => {
     if (!instancesRef.current) {
       instancesRef.current = [];
@@ -1462,7 +1475,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
   const childColliderProps = useChildColliderProps(object, mergedOptions);
   React.useLayoutEffect(() => {
     object.current.updateWorldMatrix(true, false);
-    const rigidBodies = instancesRefGetter.current();
+    const instances = instancesRefGetter.current();
     const invertedWorld = object.current.matrixWorld.clone().invert();
     object.current.traverseVisible(mesh => {
       if (mesh instanceof three.InstancedMesh) {
@@ -1474,6 +1487,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
 
           const desc = rigidBodyDescFromOptions(props);
           const rigidBody = world.createRigidBody(desc);
+          rigidBodyRefs.current.push(rigidBody);
           const scale = ((_options$scales = options.scales) === null || _options$scales === void 0 ? void 0 : _options$scales[index]) || [1, 1, 1];
           const instanceScale = worldScale.clone().multiply(vectorArrayToVector3(scale));
           rigidBodyStates.set(rigidBody.handle, createRigidBodyState({
@@ -1504,7 +1518,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
             }
 
           });
-          rigidBodies.push({
+          instances.push({
             rigidBody,
             api
           });
@@ -1512,31 +1526,27 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     });
     return () => {
-      rigidBodies.forEach(rb => {
+      instances.forEach(rb => {
         world.removeRigidBody(rb.rigidBody);
         rigidBodyStates.delete(rb.rigidBody.handle);
       });
+      rigidBodyRefs.current = [];
       instancesRef.current = [];
     };
   }, []);
   const api = React.useMemo(() => createInstancedRigidBodiesApi(instancesRefGetter), []);
   React.useImperativeHandle(ref, () => api);
-  useUpdateRigidBodyOptions({
-    current: instancesRef.current.map(({
-      rigidBody
-    }) => rigidBody)
-  }, mergedOptions, rigidBodyStates, false);
-  useRigidBodyEvents({
-    current: instancesRef.current.map(({
-      rigidBody
-    }) => rigidBody)
-  }, mergedOptions, rigidBodyEvents);
-  return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
-    value: {
+  useUpdateRigidBodyOptions(rigidBodyRefs, mergedOptions, rigidBodyStates, false);
+  useRigidBodyEvents(rigidBodyRefs, mergedOptions, rigidBodyEvents);
+  const contextValue = React.useMemo(() => {
+    return {
       ref: object,
       api,
-      options: props
-    }
+      options: mergedOptions
+    };
+  }, [api, mergedOptions]);
+  return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/React__default["default"].createElement("object3D", {
     ref: object
   }, props.children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({

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

@@ -242,27 +242,38 @@ const Physics = ({
   const [steppingState] = useState({
     accumulator: 0
   });
+  /* Check if the timestep is supposed to be variable. We'll do this here
+  once so we don't have to string-check every frame. */
+
+  const timeStepVariable = _timeStep === "vary";
   useFrame((_, dt) => {
     const world = worldRef.current;
     if (!world) return;
-    world.timestep = _timeStep;
     /**
      * Fixed timeStep simulation progression
      * @see https://gafferongames.com/post/fix_your_timestep/
     */
-    // don't step time forwards if paused
-    // Increase accumulator
 
-    steppingState.accumulator += _paused ? 0 : clamp(dt, 0, 0.2);
+    const clampedDelta = clamp(dt, 0, 0.2);
+
+    if (timeStepVariable) {
+      world.timestep = clampedDelta;
+      if (!_paused) world.step(eventQueue);
+    } else {
+      world.timestep = _timeStep; // don't step time forwards if paused
+      // Increase accumulator
+
+      steppingState.accumulator += _paused ? 0 : clampedDelta;
 
-    if (!_paused) {
-      while (steppingState.accumulator >= _timeStep) {
-        world.step(eventQueue);
-        steppingState.accumulator -= _timeStep;
+      if (!_paused) {
+        while (steppingState.accumulator >= _timeStep) {
+          world.step(eventQueue);
+          steppingState.accumulator -= _timeStep;
+        }
       }
     }
 
-    const interpolationAlpha = steppingState.accumulator % _timeStep / _timeStep; // Update meshes
+    const interpolationAlpha = timeStepVariable ? 1 : steppingState.accumulator % _timeStep / _timeStep; // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -922,7 +933,7 @@ const useChildColliderProps = (ref, options, ignoreMeshColliders = true) => {
         ignoreMeshColliders
       }));
     }
-  }, [options]);
+  }, [options.colliders]);
   return colliderProps;
 };
 const useRigidBody = (options = {}) => {
@@ -1184,12 +1195,13 @@ const RigidBody = /*#__PURE__*/forwardRef((props, ref) => {
 
   const [object, api, childColliderProps] = useRigidBody(props);
   useImperativeHandle(ref, () => api);
+  const contextValue = useMemo(() => ({
+    ref: object,
+    api,
+    options: props
+  }), [object, api, props]);
   return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
-    value: {
-      ref: object,
-      api,
-      options: props
-    }
+    value: contextValue
   }, /*#__PURE__*/React.createElement("object3D", _extends({
     ref: object
   }, objectProps, {
@@ -1424,6 +1436,7 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
         options = _objectWithoutProperties(props, _excluded);
 
   const instancesRef = useRef([]);
+  const rigidBodyRefs = useRef([]);
   const instancesRefGetter = useRef(() => {
     if (!instancesRef.current) {
       instancesRef.current = [];
@@ -1437,7 +1450,7 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
   const childColliderProps = useChildColliderProps(object, mergedOptions);
   useLayoutEffect(() => {
     object.current.updateWorldMatrix(true, false);
-    const rigidBodies = instancesRefGetter.current();
+    const instances = instancesRefGetter.current();
     const invertedWorld = object.current.matrixWorld.clone().invert();
     object.current.traverseVisible(mesh => {
       if (mesh instanceof InstancedMesh) {
@@ -1449,6 +1462,7 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
 
           const desc = rigidBodyDescFromOptions(props);
           const rigidBody = world.createRigidBody(desc);
+          rigidBodyRefs.current.push(rigidBody);
           const scale = ((_options$scales = options.scales) === null || _options$scales === void 0 ? void 0 : _options$scales[index]) || [1, 1, 1];
           const instanceScale = worldScale.clone().multiply(vectorArrayToVector3(scale));
           rigidBodyStates.set(rigidBody.handle, createRigidBodyState({
@@ -1479,7 +1493,7 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
             }
 
           });
-          rigidBodies.push({
+          instances.push({
             rigidBody,
             api
           });
@@ -1487,31 +1501,27 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
       }
     });
     return () => {
-      rigidBodies.forEach(rb => {
+      instances.forEach(rb => {
         world.removeRigidBody(rb.rigidBody);
         rigidBodyStates.delete(rb.rigidBody.handle);
       });
+      rigidBodyRefs.current = [];
       instancesRef.current = [];
     };
   }, []);
   const api = useMemo(() => createInstancedRigidBodiesApi(instancesRefGetter), []);
   useImperativeHandle(ref, () => api);
-  useUpdateRigidBodyOptions({
-    current: instancesRef.current.map(({
-      rigidBody
-    }) => rigidBody)
-  }, mergedOptions, rigidBodyStates, false);
-  useRigidBodyEvents({
-    current: instancesRef.current.map(({
-      rigidBody
-    }) => rigidBody)
-  }, mergedOptions, rigidBodyEvents);
-  return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
-    value: {
+  useUpdateRigidBodyOptions(rigidBodyRefs, mergedOptions, rigidBodyStates, false);
+  useRigidBodyEvents(rigidBodyRefs, mergedOptions, rigidBodyEvents);
+  const contextValue = useMemo(() => {
+    return {
       ref: object,
       api,
-      options: props
-    }
+      options: mergedOptions
+    };
+  }, [api, mergedOptions]);
+  return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/React.createElement("object3D", {
     ref: object
   }, props.children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React.createElement(AnyCollider, _extends({

package/package.json

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

package/readme.md

@@ -309,6 +309,22 @@ A Collider can be set to be a sensor, which means that it will not generate any
 
 WIP
 
+## Configuring Time Step Size
+
+By default, `<Physics>` will simulate the physics world at a fixed rate of 60 frames per second. This can be changed by setting the `timeStep` prop on `<Physics>`:
+
+```tsx
+<Physics timeStep={1 / 30}>{/* ... */}</Physics>
+```
+
+The `timeStep` prop may also be set to `"vary"`, which will cause the simulation's time step to adjust to every frame's frame delta:
+
+```tsx
+<Physics timeStep="vary">{/* ... */}</Physics>
+```
+
+> **Note** This is useful for games that run at variable frame rates, but may cause instability in the simulation. It also prevents the physics simulation from being fully deterministic. Please use with care!
+
 ---
 
 ## Roadmap
@@ -326,6 +342,6 @@ In order, but also not necessarily:
 - [x] InstancedMesh support
 - [x] Timestep improvements for determinism
 - [x] Normalize and improve collision events (add events to single Colliders)
-- [ ] Add collision events to InstancedRigidBodies
+- [x] Add collision events to InstancedRigidBodies
 - [ ] Docs
 - [ ] CodeSandbox examples