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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PhysicsProps } from "./Physics";
+interface FrameStepperProps {
+    type?: PhysicsProps["updateLoop"];
+    onStep: (dt: number) => void;
+    updatePriority?: number;
+}
+declare const _default: import("react").MemoExoticComponent<({ onStep, type, updatePriority }: FrameStepperProps) => JSX.Element>;
+export default _default;

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

@@ -147,6 +147,30 @@ export interface PhysicsProps {
      * @defaultValue true
      **/
     interpolate?: boolean;
+    /**
+     * The update priority at which the physics simulation should run.
+     * Only used when `updateLoop` is set to "follow".
+     *
+     * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#taking-over-the-render-loop
+     * @defaultValue undefined
+     */
+    updatePriority?: number;
+    /**
+     * Set the update loop strategy for the physics world.
+     *
+     * If set to "follow", the physics world will be stepped
+     * in a `useFrame` callback, managed by @react-three/fiber.
+     * You can use `updatePriority` prop to manage the scheduling.
+     *
+     * If set to "independent", the physics world will be stepped
+     * in a separate loop, not tied to the render loop.
+     * This is useful when using the "demand" `frameloop` strategy for the
+     * @react-three/fiber `<Canvas />`.
+     *
+     * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
+     * @defaultValue "follow"
+     */
+    updateLoop?: "follow" | "independent";
 }
 /**
  * The main physics component used to create a physics world.

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var rapier3dCompat = require('@dimforge/rapier3d-compat');
 var fiber = require('@react-three/fiber');
-var React = require('react');
+var React$1 = require('react');
 var three = require('three');
 var useAsset = require('use-asset');
 var threeStdlib = require('three-stdlib');
@@ -29,7 +29,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React__default = /*#__PURE__*/_interopDefault(React$1);
 
 function _defineProperty(obj, key, value) {
   if (key in obj) {
@@ -167,7 +167,7 @@ const vectorToTuple = v => {
   return [v];
 };
 function useConst(initialValue) {
-  const ref = React.useRef();
+  const ref = React$1.useRef();
 
   if (ref.current === undefined) {
     ref.current = {
@@ -178,27 +178,6 @@ function useConst(initialValue) {
   return ref.current.value;
 }
 
-const useRaf = callback => {
-  const cb = React.useRef(callback);
-  const raf = React.useRef(0);
-  const lastFrame = React.useRef(0);
-  React.useEffect(() => {
-    cb.current = callback;
-  }, [callback]);
-  React.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);
-  }, []);
-};
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -365,10 +344,10 @@ const setColliderOptions = (collider, options, states) => {
 };
 const useUpdateColliderOptions = (getCollider, props, states) => {
   // TODO: Improve this, split each prop into its own effect
-  const mutablePropsAsFlatArray = React.useMemo(() => mutableColliderOptionKeys.flatMap(key => {
+  const mutablePropsAsFlatArray = React$1.useMemo(() => mutableColliderOptionKeys.flatMap(key => {
     return vectorToTuple(props[key]);
   }), [props]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const collider = getCollider();
     setColliderOptions(collider, props, states);
   }, mutablePropsAsFlatArray);
@@ -514,7 +493,7 @@ activeEvents = {}) => {
     onIntersectionExit,
     onContactForce
   } = props;
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const collider = getCollider();
 
     if (collider) {
@@ -556,8 +535,8 @@ const cleanRigidBodyPropsForCollider = (props = {}) => {
 };
 
 const useMutableCallback = fn => {
-  const ref = React.useRef(fn);
-  React.useEffect(() => {
+  const ref = React$1.useRef(fn);
+  React$1.useEffect(() => {
     ref.current = fn;
   }, [fn]);
   return ref;
@@ -570,7 +549,7 @@ const useMutableCallback = fn => {
 
 
 const useRapier = () => {
-  return React.useContext(rapierContext);
+  return React$1.useContext(rapierContext);
 };
 /**
  * Registers a callback to be called before the physics step
@@ -582,7 +561,7 @@ const useBeforePhysicsStep = callback => {
     beforeStepCallbacks
   } = useRapier();
   const ref = useMutableCallback(callback);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     beforeStepCallbacks.add(ref);
     return () => {
       beforeStepCallbacks.delete(ref);
@@ -599,7 +578,7 @@ const useAfterPhysicsStep = callback => {
     afterStepCallbacks
   } = useRapier();
   const ref = useMutableCallback(callback);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     afterStepCallbacks.add(ref);
     return () => {
       afterStepCallbacks.delete(ref);
@@ -612,8 +591,8 @@ const useAfterPhysicsStep = callback => {
  */
 
 const useChildColliderProps = (ref, options, ignoreMeshColliders = true) => {
-  const [colliderProps, setColliderProps] = React.useState([]);
-  React.useEffect(() => {
+  const [colliderProps, setColliderProps] = React$1.useState([]);
+  React$1.useEffect(() => {
     const object = ref.current;
 
     if (object && options.colliders !== false) {
@@ -673,7 +652,7 @@ const applyAttractorForceOnRigidBody = (rigidBody, {
     }
   }
 };
-const Attractor = /*#__PURE__*/React.memo(props => {
+const Attractor = /*#__PURE__*/React$1.memo(props => {
   const {
     position = [0, 0, 0],
     strength = 1,
@@ -685,8 +664,8 @@ const Attractor = /*#__PURE__*/React.memo(props => {
   const {
     attractorStates
   } = useRapier();
-  const object = React.useRef(null);
-  React.useEffect(() => {
+  const object = React$1.useRef(null);
+  React$1.useEffect(() => {
     var _object$current;
 
     let uuid = ((_object$current = object.current) === null || _object$current === void 0 ? void 0 : _object$current.uuid) || "_";
@@ -712,7 +691,62 @@ const Attractor = /*#__PURE__*/React.memo(props => {
   });
 });
 
-const rapierContext = /*#__PURE__*/React.createContext(undefined);
+const useRaf = callback => {
+  const cb = React$1.useRef(callback);
+  const raf = React$1.useRef(0);
+  const lastFrame = React$1.useRef(0);
+  React$1.useEffect(() => {
+    cb.current = callback;
+  }, [callback]);
+  React$1.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
+}) => {
+  fiber.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__*/React$1.memo(FrameStepper);
+
+const rapierContext = /*#__PURE__*/React$1.createContext(undefined);
 
 const getCollisionPayloadFromSource = (target, other) => {
   var _target$collider$stat, _target$rigidBody$sta, _other$collider$state, _other$rigidBody$stat, _other$collider$state2, _other$rigidBody$stat2;
@@ -753,14 +787,16 @@ const Physics = ({
   children,
   timeStep: _timeStep = 1 / 60,
   paused: _paused = false,
-  interpolate: _interpolate = true
+  interpolate: _interpolate = true,
+  updatePriority,
+  updateLoop: _updateLoop = "follow"
 }) => {
   const rapier = useAsset.useAsset(importRapier);
   const {
     invalidate
   } = fiber.useThree();
-  const worldRef = React.useRef();
-  const getWorldRef = React.useRef(() => {
+  const worldRef = React$1.useRef();
+  const getWorldRef = React$1.useRef(() => {
     if (!worldRef.current) {
       const world = new rapier.World(vectorArrayToVector3(_gravity));
       worldRef.current = world;
@@ -777,7 +813,7 @@ const Physics = ({
   const beforeStepCallbacks = useConst(() => new Set());
   const afterStepCallbacks = useConst(() => new Set()); // Init world
 
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const world = getWorldRef.current();
     return () => {
       if (world) {
@@ -787,15 +823,15 @@ const Physics = ({
     };
   }, []); // Update gravity
 
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const world = worldRef.current;
 
     if (world) {
       world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
-  const api = React.useMemo(() => createWorldApi(getWorldRef), []);
-  const getSourceFromColliderHandle = React.useCallback(handle => {
+  const api = React$1.useMemo(() => createWorldApi(getWorldRef), []);
+  const getSourceFromColliderHandle = React$1.useCallback(handle => {
     const world = worldRef.current;
 
     if (world) {
@@ -823,11 +859,11 @@ const Physics = ({
       return source;
     }
   }, []);
-  const [steppingState] = React.useState({
+  const [steppingState] = React$1.useState({
     previousState: {},
     accumulator: 0
   });
-  const step = React.useCallback(dt => {
+  const step = React$1.useCallback(dt => {
     const world = worldRef.current;
     if (!world) return;
     /* Check if the timestep is supposed to be variable. We'll do this here
@@ -1039,14 +1075,11 @@ const Physics = ({
         maxForceMagnitude: event.maxForceMagnitude()
       }));
     });
-    world.forEachActiveRigidBody(body => {
+    world.forEachActiveRigidBody(() => {
       invalidate();
     });
   }, [_paused, _timeStep, _interpolate]);
-  useRaf(dt => {
-    if (!_paused) step(dt);
-  });
-  const context = React.useMemo(() => ({
+  const context = React$1.useMemo(() => ({
     rapier,
     world: api,
     physicsOptions: {
@@ -1063,9 +1096,18 @@ const Physics = ({
     isPaused: _paused,
     step
   }), [_paused, step]);
+  const stepCallback = React$1.useCallback(delta => {
+    if (!_paused) {
+      step(delta);
+    }
+  }, [_paused, step]);
   return /*#__PURE__*/React__default["default"].createElement(rapierContext.Provider, {
     value: context
-  }, children);
+  }, /*#__PURE__*/React__default["default"].createElement(FrameStepper$1, {
+    onStep: stepCallback,
+    type: _updateLoop,
+    updatePriority: updatePriority
+  }), children);
 };
 
 function _extends() {
@@ -1090,15 +1132,15 @@ function _extends() {
  */
 
 const useImperativeInstance = (createFn, destroyFn) => {
-  const ref = React.useRef();
-  const refGetter = React.useMemo(() => () => {
+  const ref = React$1.useRef();
+  const refGetter = React$1.useMemo(() => () => {
     if (!ref.current) {
       ref.current = createFn();
     }
 
     return ref.current;
   }, []);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const instance = refGetter();
     return () => {
       destroyFn(instance);
@@ -1165,7 +1207,7 @@ const euler = ({
  * A collider is a shape that can be attached to a rigid body to define its physical properties.
  * @internal
  */
-const AnyCollider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+const AnyCollider = /*#__PURE__*/React$1.memo( /*#__PURE__*/React$1.forwardRef((props, forwardedRef) => {
   const {
     children,
     position,
@@ -1180,7 +1222,7 @@ const AnyCollider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((prop
     colliderStates
   } = useRapier();
   const rigidBodyContext = useRigidBodyContext();
-  const ref = React.useRef(null);
+  const ref = React$1.useRef(null);
   const getInstance = useImperativeInstance(() => {
     const worldScale = ref.current.getWorldScale(vec3());
     const collider = createColliderFromOptions(props, world, worldScale, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.getRigidBody);
@@ -1188,15 +1230,15 @@ const AnyCollider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((prop
   }, collider => {
     world.removeCollider(collider);
   });
-  React.useEffect(() => {
+  React$1.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(() => {
+  React$1.useImperativeHandle(forwardedRef, () => getInstance());
+  const mergedProps = React$1.useMemo(() => {
     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);
@@ -1433,10 +1475,10 @@ const setRigidBodyOptions = (rigidBody, options, states, updateTranslations = tr
 };
 const useUpdateRigidBodyOptions = (getRigidBody, props, states, updateTranslations = true) => {
   // TODO: Improve this, split each prop into its own effect
-  const mutablePropsAsFlatArray = React.useMemo(() => mutableRigidBodyOptionKeys.flatMap(key => {
+  const mutablePropsAsFlatArray = React$1.useMemo(() => mutableRigidBodyOptionKeys.flatMap(key => {
     return vectorToTuple(props[key]);
   }), [props]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const rigidBody = getRigidBody();
     setRigidBodyOptions(rigidBody, props, states, updateTranslations);
   }, mutablePropsAsFlatArray);
@@ -1460,7 +1502,7 @@ const useRigidBodyEvents = (getRigidBody, props, events) => {
     onIntersectionExit,
     onContactForce
   };
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const rigidBody = getRigidBody();
     events.set(rigidBody.handle, eventHandlers);
     return () => {
@@ -1470,14 +1512,14 @@ const useRigidBodyEvents = (getRigidBody, props, events) => {
 };
 
 const _excluded$1 = ["children", "type", "position", "rotation", "scale", "quaternion", "transformState"];
-const RigidBodyContext = /*#__PURE__*/React.createContext(undefined);
-const useRigidBodyContext = () => React.useContext(RigidBodyContext);
+const RigidBodyContext = /*#__PURE__*/React$1.createContext(undefined);
+const useRigidBodyContext = () => React$1.useContext(RigidBodyContext);
 
 /**
  * A rigid body is a physical object that can be simulated by the physics engine.
  * @category Components
  */
-const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+const RigidBody = /*#__PURE__*/React$1.memo( /*#__PURE__*/React$1.forwardRef((props, forwardedRef) => {
   const {
     children,
     type,
@@ -1489,14 +1531,14 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   } = props,
         objectProps = _objectWithoutProperties(props, _excluded$1);
 
-  const ref = React.useRef(null);
+  const ref = React$1.useRef(null);
   const {
     world,
     rigidBodyStates,
     physicsOptions,
     rigidBodyEvents
   } = useRapier();
-  const mergedOptions = React.useMemo(() => {
+  const mergedOptions = React$1.useMemo(() => {
     return _objectSpread2(_objectSpread2(_objectSpread2({}, physicsOptions), props), {}, {
       children: undefined
     });
@@ -1511,7 +1553,7 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
     world.removeRigidBody(rigidBody);
   }); // Only provide a object state after the ref has been set
 
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const rigidBody = getInstance();
     const state = createRigidBodyState({
       rigidBody,
@@ -1524,8 +1566,8 @@ const RigidBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props,
   }, []);
   useUpdateRigidBodyOptions(getInstance, mergedOptions, rigidBodyStates);
   useRigidBodyEvents(getInstance, mergedOptions, rigidBodyEvents);
-  React.useImperativeHandle(forwardedRef, () => getInstance());
-  const contextValue = React.useMemo(() => {
+  React$1.useImperativeHandle(forwardedRef, () => getInstance());
+  const contextValue = React$1.useMemo(() => {
     return {
       ref,
       getRigidBody: getInstance,
@@ -1551,7 +1593,7 @@ RigidBody.displayName = "RigidBody";
  * A mesh collider is a collider that is automatically generated from the geometry of the children.
  * @category Colliders
  */
-const MeshCollider = /*#__PURE__*/React.memo(props => {
+const MeshCollider = /*#__PURE__*/React$1.memo(props => {
   const {
     children,
     type
@@ -1559,11 +1601,11 @@ const MeshCollider = /*#__PURE__*/React.memo(props => {
   const {
     physicsOptions
   } = useRapier();
-  const object = React.useRef(null);
+  const object = React$1.useRef(null);
   const {
     options
   } = useRigidBodyContext();
-  const mergedOptions = React.useMemo(() => {
+  const mergedOptions = React$1.useMemo(() => {
     return _objectSpread2(_objectSpread2(_objectSpread2({}, physicsOptions), options), {}, {
       children: undefined,
       colliders: type
@@ -1603,10 +1645,10 @@ const AttractorHelper = props => {
   const {
     scene
   } = fiber.useThree();
-  const ref = React.useRef(null);
-  const normalsHelper = React.useRef();
+  const ref = React$1.useRef(null);
+  const normalsHelper = React$1.useRef();
   const color = props.strength > 0 ? 0x0000ff : 0xff0000;
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (ref.current) {
       normalsHelper.current = new threeStdlib.VertexNormalsHelper(ref.current, props.range, color);
       normalsHelper.current.frustumCulled = false;
@@ -1640,14 +1682,14 @@ const AttractorHelper = props => {
   }));
 };
 
-const Debug = /*#__PURE__*/React.memo(() => {
+const Debug = /*#__PURE__*/React$1.memo(() => {
   const {
     world,
     attractorStates
   } = useRapier();
-  const ref = React.useRef(null);
-  const [attractors, setAttractors] = React.useState([]);
-  const currMap = React.useRef(new Map());
+  const ref = React$1.useRef(null);
+  const [attractors, setAttractors] = React$1.useState([]);
+  const currMap = React$1.useRef(new Map());
   fiber.useFrame(() => {
     const mesh = ref.current;
     if (!mesh) return;
@@ -1672,9 +1714,9 @@ const Debug = /*#__PURE__*/React.memo(() => {
 });
 
 const _excluded = ["children", "instances", "colliderNodes", "position", "rotation", "quaternion", "scale"];
-const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props, ref) => {
-  const object = React.useRef(null);
-  const instancedWrapper = React.useRef(null);
+const InstancedRigidBodies = /*#__PURE__*/React$1.memo( /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  const object = React$1.useRef(null);
+  const instancedWrapper = React$1.useRef(null);
 
   const {
     // instanced props
@@ -1689,8 +1731,8 @@ const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forward
   } = props,
         rigidBodyProps = _objectWithoutProperties(props, _excluded);
 
-  const rigidBodyApis = React.useRef([]);
-  React.useImperativeHandle(ref, () => rigidBodyApis.current, [instances]);
+  const rigidBodyApis = React$1.useRef([]);
+  React$1.useImperativeHandle(ref, () => rigidBodyApis.current, [instances]);
   const childColliderProps = useChildColliderProps(object, _objectSpread2(_objectSpread2({}, props), {}, {
     children: undefined
   }));
@@ -1705,7 +1747,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forward
     return undefined;
   };
 
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const instancedMesh = getInstancedMesh();
 
     if (instancedMesh) {
@@ -1747,7 +1789,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.memo( /*#__PURE__*/React.forward
   }, children), instances === null || instances === void 0 ? void 0 : instances.map((instance, index) => /*#__PURE__*/React__default["default"].createElement(RigidBody, _extends({}, rigidBodyProps, instance, {
     ref: body => rigidBodyApis.current[index] = body,
     transformState: state => applyInstancedState(state, index)
-  }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, colliderNodes.map((node, index) => /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+  }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, colliderNodes.map((node, index) => /*#__PURE__*/React__default["default"].createElement(React$1.Fragment, {
     key: index
   }, node)), childColliderProps.map((colliderProps, colliderIndex) => /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({
     key: colliderIndex
@@ -1763,7 +1805,7 @@ const useImpulseJoint = (body1, body2, params) => {
   const {
     world
   } = useRapier();
-  const jointRef = React.useRef();
+  const jointRef = React$1.useRef();
   useImperativeInstance(() => {
     if (body1.current && body2.current) {
       const newJoint = world.createImpulseJoint(params, body1.current, body2.current);