@react-three/rapier 0.14.0-rc.0 → 0.14.0-rc.2

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

@@ -1,7 +1,7 @@
 import { ActiveEvents, ColliderDesc, EventQueue, RigidBodyDesc } from '@dimforge/rapier3d-compat';
 export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody } from '@dimforge/rapier3d-compat';
-import { useThree, useFrame } from '@react-three/fiber';
-import React, { useRef, useEffect, useMemo, useContext, useState, memo, createContext, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import React$1, { useRef, useMemo, useEffect, useContext, useState, memo, createContext, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
 import { Quaternion, Euler, Vector3, Object3D, Matrix4, MathUtils, BufferAttribute, DynamicDrawUsage } from 'three';
 import { useAsset } from 'use-asset';
 import { mergeVertices, VertexNormalsHelper } from 'three-stdlib';
@@ -153,27 +153,41 @@ function useConst(initialValue) {
   return ref.current.value;
 }
 
-const useRaf = callback => {
-  const cb = useRef(callback);
-  const raf = useRef(0);
-  const lastFrame = useRef(0);
-  useEffect(() => {
-    cb.current = callback;
-  }, [callback]);
-  useEffect(() => {
-    const loop = () => {
-      const now = performance.now();
-      const delta = now - lastFrame.current;
-      raf.current = requestAnimationFrame(loop);
-      cb.current(delta / 1000);
-      lastFrame.current = now;
-    };
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-    raf.current = requestAnimationFrame(loop);
-    return () => cancelAnimationFrame(raf.current);
-  }, []);
-};
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
 
+  return target;
+}
+
+const _excluded$2 = ["mass", "linearDamping", "angularDamping", "type", "onCollisionEnter", "onCollisionExit", "onIntersectionEnter", "onIntersectionExit", "onContactForce", "children", "canSleep", "ccd", "gravityScale"];
 const scaleColliderArgs = (shape, args, scale) => {
   const newArgs = args.slice(); // Heightfield uses a vector
 
@@ -340,7 +354,7 @@ const createColliderPropsFromChildren = ({
   ignoreMeshColliders: _ignoreMeshColliders = true,
   options
 }) => {
-  const colliderProps = [];
+  const childColliderProps = [];
   object.updateWorldMatrix(true, false);
   const invertedParentMatrixWorld = object.matrixWorld.clone().invert();
 
@@ -361,13 +375,16 @@ const createColliderPropsFromChildren = ({
         args,
         offset
       } = getColliderArgsFromGeometry(geometry, options.colliders || "cuboid");
-      colliderProps.push(_objectSpread2(_objectSpread2({}, options), {}, {
+
+      const colliderProps = _objectSpread2(_objectSpread2({}, cleanRigidBodyPropsForCollider(options)), {}, {
         args: args,
         shape: shape,
         rotation: [rotationEuler.x, rotationEuler.y, rotationEuler.z],
         position: [_position.x + offset.x * worldScale.x, _position.y + offset.y * worldScale.y, _position.z + offset.z * worldScale.z],
         scale: [worldScale.x, worldScale.y, worldScale.z]
-      }));
+      });
+
+      childColliderProps.push(colliderProps);
     }
   };
 
@@ -377,7 +394,7 @@ const createColliderPropsFromChildren = ({
     object.traverseVisible(colliderFromChild);
   }
 
-  return colliderProps;
+  return childColliderProps;
 };
 const getColliderArgsFromGeometry = (geometry, colliders) => {
   switch (colliders) {
@@ -433,7 +450,17 @@ const getColliderArgsFromGeometry = (geometry, colliders) => {
     offset: new Vector3()
   };
 };
-const useColliderEvents = (getCollider, props, events) => {
+const getActiveCollisionEventsFromProps = props => {
+  return {
+    collision: !!(props !== null && props !== void 0 && props.onCollisionEnter || props !== null && props !== void 0 && props.onCollisionExit || props !== null && props !== void 0 && props.onIntersectionEnter || props !== null && props !== void 0 && props.onIntersectionExit),
+    contactForce: !!(props !== null && props !== void 0 && props.onContactForce)
+  };
+};
+const useColliderEvents = (getCollider, props, events,
+/**
+ * The RigidBody can pass down active events to the collider without attaching the event listners
+ */
+activeEvents = {}) => {
   const {
     onCollisionEnter,
     onCollisionExit,
@@ -445,8 +472,12 @@ const useColliderEvents = (getCollider, props, events) => {
     const collider = getCollider();
 
     if (collider) {
-      const hasCollisionEvent = !!(onCollisionEnter || onCollisionExit || onIntersectionEnter || onIntersectionExit);
-      const hasContactForceEvent = !!onContactForce;
+      const {
+        collision: collisionEventsActive,
+        contactForce: contactForceEventsActive
+      } = getActiveCollisionEventsFromProps(props);
+      const hasCollisionEvent = collisionEventsActive || activeEvents.collision;
+      const hasContactForceEvent = contactForceEventsActive || activeEvents.contactForce;
 
       if (hasCollisionEvent && hasContactForceEvent) {
         collider.setActiveEvents(ActiveEvents.COLLISION_EVENTS | ActiveEvents.CONTACT_FORCE_EVENTS);
@@ -470,7 +501,12 @@ const useColliderEvents = (getCollider, props, events) => {
         events.delete(collider.handle);
       }
     };
-  }, [onCollisionEnter, onCollisionExit, onIntersectionEnter, onIntersectionExit, onContactForce]);
+  }, [onCollisionEnter, onCollisionExit, onIntersectionEnter, onIntersectionExit, onContactForce, activeEvents]);
+};
+const cleanRigidBodyPropsForCollider = (props = {}) => {
+  const rest = _objectWithoutProperties(props, _excluded$2);
+
+  return rest;
 };
 
 const useMutableCallback = fn => {
@@ -624,12 +660,67 @@ const Attractor = /*#__PURE__*/memo(props => {
       attractorStates.delete(uuid);
     };
   }, [props]);
-  return /*#__PURE__*/React.createElement("object3D", {
+  return /*#__PURE__*/React$1.createElement("object3D", {
     ref: object,
     position: position
   });
 });
 
+const useRaf = callback => {
+  const cb = useRef(callback);
+  const raf = useRef(0);
+  const lastFrame = useRef(0);
+  useEffect(() => {
+    cb.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    const loop = () => {
+      const now = performance.now();
+      const delta = now - lastFrame.current;
+      raf.current = requestAnimationFrame(loop);
+      cb.current(delta / 1000);
+      lastFrame.current = now;
+    };
+
+    raf.current = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf.current);
+  }, []);
+};
+
+const UseFrameStepper = ({
+  onStep,
+  updatePriority
+}) => {
+  useFrame((_, dt) => {
+    onStep(dt);
+  }, updatePriority);
+  return null;
+};
+
+const RafStepper = ({
+  onStep
+}) => {
+  useRaf(dt => {
+    onStep(dt);
+  });
+  return null;
+};
+
+const FrameStepper = ({
+  onStep,
+  type,
+  updatePriority
+}) => {
+  return type === "independent" ? /*#__PURE__*/React.createElement(RafStepper, {
+    onStep: onStep
+  }) : /*#__PURE__*/React.createElement(UseFrameStepper, {
+    onStep: onStep,
+    updatePriority: updatePriority
+  });
+};
+
+var FrameStepper$1 = /*#__PURE__*/memo(FrameStepper);
+
 const rapierContext = /*#__PURE__*/createContext(undefined);
 
 const getCollisionPayloadFromSource = (target, other) => {
@@ -671,7 +762,9 @@ const Physics = ({
   children,
   timeStep: _timeStep = 1 / 60,
   paused: _paused = false,
-  interpolate: _interpolate = true
+  interpolate: _interpolate = true,
+  updatePriority,
+  updateLoop: _updateLoop = "follow"
 }) => {
   const rapier = useAsset(importRapier);
   const {
@@ -957,13 +1050,10 @@ const Physics = ({
         maxForceMagnitude: event.maxForceMagnitude()
       }));
     });
-    world.forEachActiveRigidBody(body => {
+    world.forEachActiveRigidBody(() => {
       invalidate();
     });
   }, [_paused, _timeStep, _interpolate]);
-  useRaf(dt => {
-    if (!_paused) step(dt);
-  });
   const context = useMemo(() => ({
     rapier,
     world: api,
@@ -981,9 +1071,18 @@ const Physics = ({
     isPaused: _paused,
     step
   }), [_paused, step]);
-  return /*#__PURE__*/React.createElement(rapierContext.Provider, {
+  const stepCallback = useCallback(delta => {
+    if (!_paused) {
+      step(delta);
+    }
+  }, [_paused, step]);
+  return /*#__PURE__*/React$1.createElement(rapierContext.Provider, {
     value: context
-  }, children);
+  }, /*#__PURE__*/React$1.createElement(FrameStepper$1, {
+    onStep: stepCallback,
+    type: _updateLoop,
+    updatePriority: updatePriority
+  }), children);
 };
 
 function _extends() {
@@ -1003,40 +1102,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
 /**
  * Initiate an instance and return a safe getter
  */
@@ -1149,11 +1214,11 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwarded
   }, []);
   useImperativeHandle(forwardedRef, () => getInstance());
   const mergedProps = useMemo(() => {
-    return _objectSpread2(_objectSpread2({}, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options), props);
+    return _objectSpread2(_objectSpread2({}, cleanRigidBodyPropsForCollider(rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options)), props);
   }, [props, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options]);
   useUpdateColliderOptions(getInstance, mergedProps, colliderStates);
-  useColliderEvents(getInstance, mergedProps, colliderEvents);
-  return /*#__PURE__*/React.createElement("object3D", {
+  useColliderEvents(getInstance, mergedProps, colliderEvents, getActiveCollisionEventsFromProps(rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options));
+  return /*#__PURE__*/React$1.createElement("object3D", {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
@@ -1167,8 +1232,8 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwarded
  * A cuboid collider shape
  * @category Colliders
  */
-const CuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const CuboidCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "cuboid",
     ref: ref
   }));
@@ -1178,8 +1243,8 @@ const CuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const RoundCuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const RoundCuboidCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "roundCuboid",
     ref: ref
   }));
@@ -1189,8 +1254,8 @@ const RoundCuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const BallCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const BallCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "ball",
     ref: ref
   }));
@@ -1200,8 +1265,8 @@ const BallCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const CapsuleCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const CapsuleCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "capsule",
     ref: ref
   }));
@@ -1211,8 +1276,8 @@ const CapsuleCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const HeightfieldCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const HeightfieldCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "heightfield",
     ref: ref
   }));
@@ -1222,8 +1287,8 @@ const HeightfieldCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const TrimeshCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const TrimeshCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "trimesh",
     ref: ref
   }));
@@ -1233,8 +1298,8 @@ const TrimeshCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const ConeCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const ConeCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "cone",
     ref: ref
   }));
@@ -1244,8 +1309,8 @@ const ConeCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const CylinderCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const CylinderCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "cylinder",
     ref: ref
   }));
@@ -1255,8 +1320,8 @@ const CylinderCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const ConvexHullCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const ConvexHullCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "convexHull",
     ref: ref
   }));
@@ -1400,7 +1465,8 @@ const useRigidBodyEvents = (getRigidBody, props, events) => {
     onCollisionEnter,
     onCollisionExit,
     onIntersectionEnter,
-    onIntersectionExit
+    onIntersectionExit,
+    onContactForce
   } = props;
   const eventHandlers = {
     onWake,
@@ -1408,7 +1474,8 @@ const useRigidBodyEvents = (getRigidBody, props, events) => {
     onCollisionEnter,
     onCollisionExit,
     onIntersectionEnter,
-    onIntersectionExit
+    onIntersectionExit,
+    onContactForce
   };
   useEffect(() => {
     const rigidBody = getRigidBody();
@@ -1416,7 +1483,7 @@ const useRigidBodyEvents = (getRigidBody, props, events) => {
     return () => {
       events.delete(rigidBody.handle);
     };
-  }, [onWake, onSleep, onCollisionEnter, onCollisionExit, onIntersectionEnter, onIntersectionExit]);
+  }, [onWake, onSleep, onCollisionEnter, onCollisionExit, onIntersectionEnter, onIntersectionExit, onContactForce]);
 };
 
 const _excluded$1 = ["children", "type", "position", "rotation", "scale", "quaternion", "transformState"];
@@ -1482,16 +1549,16 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
       options: mergedOptions
     };
   }, [mergedOptions]);
-  return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(RigidBodyContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement("object3D", _extends({
+  }, /*#__PURE__*/React$1.createElement("object3D", _extends({
     ref: ref
   }, objectProps, {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
     scale: scale
-  }), children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
+  }), children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React$1.createElement(AnyCollider, _extends({
     key: index
   }, colliderProps)))));
 }));
@@ -1520,12 +1587,12 @@ const MeshCollider = /*#__PURE__*/memo(props => {
     });
   }, [physicsOptions, options]);
   const childColliderProps = useChildColliderProps(object, mergedOptions, false);
-  return /*#__PURE__*/React.createElement("object3D", {
+  return /*#__PURE__*/React$1.createElement("object3D", {
     ref: object,
     userData: {
       r3RapierType: "MeshCollider"
     }
-  }, children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
+  }, children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React$1.createElement(AnyCollider, _extends({
     key: index
   }, colliderProps))));
 });
@@ -1578,13 +1645,13 @@ const AttractorHelper = props => {
       (_normalsHelper$curren = normalsHelper.current) === null || _normalsHelper$curren === void 0 ? void 0 : _normalsHelper$curren.update();
     }
   });
-  return /*#__PURE__*/React.createElement("mesh", {
+  return /*#__PURE__*/React$1.createElement("mesh", {
     ref: ref,
     position: props.object.position,
     frustumCulled: false
-  }, /*#__PURE__*/React.createElement("sphereGeometry", {
+  }, /*#__PURE__*/React$1.createElement("sphereGeometry", {
     args: [0.2, 6, 6]
-  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+  }), /*#__PURE__*/React$1.createElement("meshBasicMaterial", {
     color: color,
     wireframe: true
   }));
@@ -1610,13 +1677,13 @@ const Debug = /*#__PURE__*/memo(() => {
       currMap.current = new Map(attractorStates);
     }
   });
-  return /*#__PURE__*/React.createElement("group", null, /*#__PURE__*/React.createElement("lineSegments", {
+  return /*#__PURE__*/React$1.createElement("group", null, /*#__PURE__*/React$1.createElement("lineSegments", {
     ref: ref,
     frustumCulled: false
-  }, /*#__PURE__*/React.createElement("lineBasicMaterial", {
+  }, /*#__PURE__*/React$1.createElement("lineBasicMaterial", {
     color: 0xffffff,
     vertexColors: true
-  }), /*#__PURE__*/React.createElement("bufferGeometry", null)), attractors.map((attractor, i) => /*#__PURE__*/React.createElement(AttractorHelper, _extends({
+  }), /*#__PURE__*/React$1.createElement("bufferGeometry", null)), attractors.map((attractor, i) => /*#__PURE__*/React$1.createElement(AttractorHelper, _extends({
     key: attractor.object.uuid
   }, attractor))));
 });
@@ -1685,21 +1752,21 @@ const InstancedRigidBodies = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props,
     return state;
   };
 
-  return /*#__PURE__*/React.createElement("object3D", _extends({
+  return /*#__PURE__*/React$1.createElement("object3D", _extends({
     ref: object
   }, rigidBodyProps, {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
     scale: scale
-  }), /*#__PURE__*/React.createElement("object3D", {
+  }), /*#__PURE__*/React$1.createElement("object3D", {
     ref: instancedWrapper
-  }, children), instances === null || instances === void 0 ? void 0 : instances.map((instance, index) => /*#__PURE__*/React.createElement(RigidBody, _extends({}, rigidBodyProps, instance, {
+  }, children), instances === null || instances === void 0 ? void 0 : instances.map((instance, index) => /*#__PURE__*/React$1.createElement(RigidBody, _extends({}, rigidBodyProps, instance, {
     ref: body => rigidBodyApis.current[index] = body,
     transformState: state => applyInstancedState(state, index)
-  }), /*#__PURE__*/React.createElement(React.Fragment, null, colliderNodes.map((node, index) => /*#__PURE__*/React.createElement(Fragment, {
+  }), /*#__PURE__*/React$1.createElement(React$1.Fragment, null, colliderNodes.map((node, index) => /*#__PURE__*/React$1.createElement(Fragment, {
     key: index
-  }, node)), childColliderProps.map((colliderProps, colliderIndex) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
+  }, node)), childColliderProps.map((colliderProps, colliderIndex) => /*#__PURE__*/React$1.createElement(AnyCollider, _extends({
     key: colliderIndex
   }, colliderProps)))))));
 }));

package/package.json

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

package/readme.md

@@ -838,4 +838,14 @@ step(1 / 60);
 ```
 
 ### On-demand rendering
-`@react-three/rapier` runs the physics simulation independently from the render loop, and will tell `@react-three/fiber` to render if the scene has active (non-sleeping) RigidBodies. This allows you to use the `<Canvas frameloop="demand" />` (https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering) strategy to only render the scene when needed.
+By default `@react-three/rapier` will update the physics simulation when a frame renders. This is fine for most cases, but if you want to only render the scene when things have changed, you need to run the physics simulation independently from the render loop.
+
+- See https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering, for info on on-demand rendering in `@react-tree/fiber`.
+
+Setting `<Physics updateLoop="independent" />` will make the physics simulation run in it's own `requestAnimationFrame` loop, and call `invalidate` on the canvas only when there are active (moving) bodies.
+
+```tsx
+<Canvas frameloop="demand">
+  <Physics updateLoop="independent">...</Physics>
+</Canvas>
+```