@react-three/rapier 0.6.2 → 0.6.5

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

@@ -2,10 +2,9 @@ import React from "react";
 import { InstancedRigidBodyApi } from "./api";
 import { RigidBodyProps } from "./RigidBody";
 import { Vector3Array } from "./types";
-interface InstancedRigidBodiesProps extends Omit<RigidBodyProps, "position" | "rotation" | "onCollisionEnter" | "onCollisionExit"> {
+export interface InstancedRigidBodiesProps extends Omit<RigidBodyProps, "position" | "rotation" | "onCollisionEnter" | "onCollisionExit"> {
     positions?: Vector3Array[];
     rotations?: Vector3Array[];
     scales?: Vector3Array[];
 }
 export declare const InstancedRigidBodies: React.ForwardRefExoticComponent<InstancedRigidBodiesProps & React.RefAttributes<InstancedRigidBodyApi>>;
-export {};

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

@@ -19,6 +19,7 @@ export interface RapierContext {
         colliders: RigidBodyAutoCollider;
     };
     rigidBodyEvents: EventMap;
+    isPaused: boolean;
 }
 export declare const RapierContext: React.Context<RapierContext | undefined>;
 declare type EventMap = Map<ColliderHandle | RigidBodyHandle, {
@@ -51,14 +52,21 @@ interface RapierWorldProps {
      * Setting this to a number (eg. 1/60) will run the
      * simulation at that framerate.
      *
-     * "vary" will run the simulation at a delta-value based
-     * on the users current framerate. This ensures simulations
-     * run at the same percieved speed at all framerates, but
-     * can also lead to instability.
+     * @defaultValue 1/60
+     */
+    timeStep?: number;
+    /**
+     * Maximum number of fixed steps to take per function call.
+     *
+     * @defaultValue 10
+     */
+    maxSubSteps?: number;
+    /**
+     * Pause the physics simulation
      *
-     * @defaultValue "vary"
+     * @defaultValue false
      */
-    timeStep?: number | "vary";
+    paused?: boolean;
 }
 export declare const Physics: FC<RapierWorldProps>;
 export {};

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

@@ -1,12 +1,20 @@
-import React, { MutableRefObject } from "react";
+import React, { MutableRefObject, RefObject } from "react";
 import { ReactNode } from "react";
 import { Object3D } from "three";
+import { InstancedRigidBodyApi } from "./api";
+import { InstancedRigidBodiesProps } from "./InstancedRigidBodies";
 import { RigidBodyApi, UseRigidBodyOptions } from "./types";
+export declare const RigidBodyContext: React.Context<{
+    ref: RefObject<Object3D> | MutableRefObject<Object3D>;
+    api: RigidBodyApi | InstancedRigidBodyApi;
+    hasCollisionEvents: boolean;
+    options: UseRigidBodyOptions | InstancedRigidBodiesProps;
+}>;
 export declare const useRigidBodyContext: () => {
-    ref: MutableRefObject<Object3D>;
-    api: RigidBodyApi;
+    ref: RefObject<Object3D> | MutableRefObject<Object3D>;
+    api: RigidBodyApi | InstancedRigidBodyApi;
     hasCollisionEvents: boolean;
-    options: UseRigidBodyOptions;
+    options: UseRigidBodyOptions | InstancedRigidBodiesProps;
 };
 export interface RigidBodyProps extends UseRigidBodyOptions {
     children?: ReactNode;

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

@@ -75,6 +75,22 @@ export interface RigidBodyApi {
      * Sets the angular velocity of this rigid-body.
      */
     setAngvel(velocity: Vector3Object): void;
+    /**
+     * The linear damping of this rigid-body.
+     */
+    linearDamping(): number;
+    /**
+     * Sets the linear damping factor applied to this rigid-body.
+     */
+    setLinearDamping(factor: number): void;
+    /**
+     * The angular damping of this rigid-body.
+     */
+    angularDamping(): number;
+    /**
+     * Sets the anugular damping factor applied to this rigid-body.
+     */
+    setAngularDamping(factor: number): void;
     /**
      * If this rigid body is kinematic, sets its future rotation after the next timestep integration.
      *

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

@@ -1,8 +1,8 @@
 import { MutableRefObject } from "react";
-import { CoefficientCombineRule, RigidBody as RapierRigidBody, Collider as RapierCollider, TempContactManifold } from "@dimforge/rapier3d-compat";
+import { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody, TempContactManifold } from "@dimforge/rapier3d-compat";
 import { createColliderApi, createJointApi, createRigidBodyApi, createWorldApi } from "./api";
-export { RapierRigidBody, RapierCollider };
 export { CoefficientCombineRule as CoefficientCombineRule } from "@dimforge/rapier3d-compat";
+export { RapierRigidBody, RapierCollider };
 export declare type RefGetter<T> = MutableRefObject<() => T | undefined>;
 export declare type RigidBodyAutoCollider = "ball" | "cuboid" | "hull" | "trimesh" | false;
 export interface UseRigidBodyAPI {
@@ -126,6 +126,10 @@ export interface UseRigidBodyOptions {
      * default: true
      */
     canSleep?: boolean;
+    /** The linear damping coefficient of this rigid-body.*/
+    linearDamping?: number;
+    /** The angular damping coefficient of this rigid-body.*/
+    angularDamping?: number;
     /** The linear velocity of this body.
      * default: zero velocity
      */

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

@@ -1,4 +1,4 @@
-import { Collider, ColliderDesc, RigidBody, RigidBodyDesc, Vector3 as RapierVector3, Quaternion as RapierQuaternion } from "@dimforge/rapier3d-compat";
+import { Collider, ColliderDesc, Quaternion as RapierQuaternion, RigidBody, RigidBodyDesc, Vector3 as RapierVector3 } from "@dimforge/rapier3d-compat";
 import { BufferGeometry, Matrix4, Object3D, Quaternion, Vector3 } from "three";
 import { RigidBodyApi, RigidBodyAutoCollider, RigidBodyShape, RigidBodyTypeString, UseColliderOptions, UseRigidBodyOptions, Vector3Array, WorldApi } from "./types";
 export declare const vectorArrayToVector3: (arr: Vector3Array) => Vector3;
@@ -26,7 +26,16 @@ interface CreateColliderFromOptions {
     }): Collider;
 }
 export declare const createColliderFromOptions: CreateColliderFromOptions;
-export declare const createCollidersFromChildren: (object: Object3D, rigidBody: RigidBodyApi | RigidBody, options: UseRigidBodyOptions, world: WorldApi, ignoreMeshColliders?: boolean) => Collider[];
+interface CreateCollidersFromChildren {
+    (options: {
+        object: Object3D;
+        rigidBody?: Pick<RigidBodyApi | RigidBody, "handle">;
+        options: UseRigidBodyOptions;
+        world: WorldApi;
+        ignoreMeshColliders: boolean;
+    }): Collider[];
+}
+export declare const createCollidersFromChildren: CreateCollidersFromChildren;
 export declare const colliderDescFromGeometry: (geometry: BufferGeometry, colliders: RigidBodyAutoCollider, scale: Vector3, hasCollisionEvents: boolean) => ColliderDesc;
 export declare const scaleVertices: (vertices: ArrayLike<number>, scale: Vector3) => number[];
 export declare const rigidBodyDescFromOptions: (options: UseRigidBodyOptions) => RigidBodyDesc;

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

@@ -154,13 +154,19 @@ const isChildOfMeshCollider = child => {
   return flag;
 };
 
-const createCollidersFromChildren = (object, rigidBody, options, world, ignoreMeshColliders = true) => {
+const createCollidersFromChildren = ({
+  object,
+  rigidBody,
+  options,
+  world,
+  ignoreMeshColliders: _ignoreMeshColliders = true
+}) => {
   const hasCollisionEvents = !!(options.onCollisionEnter || options.onCollisionExit);
   const colliders = [];
   new three.Vector3();
-  object.traverse(child => {
+  object.traverseVisible(child => {
     if ("isMesh" in child) {
-      if (ignoreMeshColliders && isChildOfMeshCollider(child)) return;
+      if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
       const {
         geometry
       } = child;
@@ -201,7 +207,7 @@ const createCollidersFromChildren = (object, rigidBody, options, world, ignoreMe
         z: rz,
         w: rw
       });
-      const actualRigidBody = world.getRigidBody(rigidBody === null || rigidBody === void 0 ? void 0 : rigidBody.handle);
+      const actualRigidBody = rigidBody ? world.getRigidBody(rigidBody.handle) : undefined;
       const collider = world.createCollider(desc, actualRigidBody);
       colliders.push(collider);
     }
@@ -267,11 +273,13 @@ const scaleVertices = (vertices, scale) => {
   return scaledVerts;
 };
 const rigidBodyDescFromOptions = options => {
-  var _options$linearVeloci, _options$angularVeloc, _options$gravityScale, _options$canSleep, _options$ccd, _options$enabledRotat, _options$enabledTrans;
+  var _options$linearVeloci, _options$angularVeloc, _options$angularDampi, _options$linearDampin, _options$gravityScale, _options$canSleep, _options$ccd, _options$enabledRotat, _options$enabledTrans;
 
   const type = rigidBodyTypeFromString((options === null || options === void 0 ? void 0 : options.type) || "dynamic");
   const [lvx, lvy, lvz] = (_options$linearVeloci = options === null || options === void 0 ? void 0 : options.linearVelocity) !== null && _options$linearVeloci !== void 0 ? _options$linearVeloci : [0, 0, 0];
   const [avx, avy, avz] = (_options$angularVeloc = options === null || options === void 0 ? void 0 : options.angularVelocity) !== null && _options$angularVeloc !== void 0 ? _options$angularVeloc : [0, 0, 0];
+  const angularDamping = (_options$angularDampi = options === null || options === void 0 ? void 0 : options.angularDamping) !== null && _options$angularDampi !== void 0 ? _options$angularDampi : 0;
+  const linearDamping = (_options$linearDampin = options === null || options === void 0 ? void 0 : options.linearDamping) !== null && _options$linearDampin !== void 0 ? _options$linearDampin : 0;
   const gravityScale = (_options$gravityScale = options === null || options === void 0 ? void 0 : options.gravityScale) !== null && _options$gravityScale !== void 0 ? _options$gravityScale : 1;
   const canSleep = (_options$canSleep = options === null || options === void 0 ? void 0 : options.canSleep) !== null && _options$canSleep !== void 0 ? _options$canSleep : true;
   const ccdEnabled = (_options$ccd = options === null || options === void 0 ? void 0 : options.ccd) !== null && _options$ccd !== void 0 ? _options$ccd : false;
@@ -281,7 +289,7 @@ const rigidBodyDescFromOptions = options => {
     x: avx,
     y: avy,
     z: avz
-  }).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled).enabledRotations(erx, ery, erz).enabledTranslations(etx, ety, etz);
+  }).setLinearDamping(linearDamping).setAngularDamping(angularDamping).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled).enabledRotations(erx, ery, erz).enabledTranslations(etx, ety, etz);
   if (options.lockRotations) desc.lockRotations();
   if (options.lockTranslations) desc.lockTranslations();
   return desc;
@@ -366,6 +374,18 @@ const createRigidBodyApi = ref => {
     },
 
     setAngvel: velocity => ref.current().setAngvel(velocity, true),
+
+    linearDamping() {
+      return ref.current().linearDamping();
+    },
+
+    setLinearDamping: factor => ref.current().setLinearDamping(factor),
+
+    angularDamping() {
+      return ref.current().angularDamping();
+    },
+
+    setAngularDamping: factor => ref.current().setAngularDamping(factor),
     setNextKinematicRotation: ({
       x,
       y,
@@ -449,9 +469,15 @@ const Physics = ({
   colliders: _colliders = "cuboid",
   gravity: _gravity = [0, -9.81, 0],
   children,
-  timeStep: _timeStep = "vary"
+  timeStep: _timeStep = 1 / 60,
+  maxSubSteps: _maxSubSteps = 10,
+  paused: _paused = false
 }) => {
   const rapier = useAsset.useAsset(importRapier);
+  const [isPaused, setIsPaused] = React.useState(_paused);
+  React.useEffect(() => {
+    setIsPaused(_paused);
+  }, [_paused]);
   const worldRef = React.useRef();
   const getWorldRef = React.useRef(() => {
     if (!worldRef.current) {
@@ -471,7 +497,6 @@ const Physics = ({
     return () => {
       if (world) {
         world.free();
-        worldRef.current = undefined;
       }
     };
   }, []); // Update gravity
@@ -483,22 +508,46 @@ const Physics = ({
       world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
-  const time = React.useRef(performance.now());
-  fiber.useFrame(context => {
+  const [steppingState] = React.useState({
+    time: 0,
+    lastTime: 0,
+    accumulator: 0
+  });
+  fiber.useFrame((_, delta) => {
     const world = worldRef.current;
-    if (!world) return; // Set timestep to current delta, to allow for variable frame rates
-    // We cap the delta at 100, so that the physics simulation doesn't get wild
-
-    const now = performance.now();
-    const delta = Math.min(100, now - time.current);
-
-    if (_timeStep === "vary") {
-      world.timestep = delta / 1000;
-    } else {
-      world.timestep = _timeStep;
+    if (!world) return;
+    world.timestep = _timeStep;
+    /**
+     * Fixed timeStep simulation progression
+     * @see https://gafferongames.com/post/fix_your_timestep/ 
+    */
+
+    let previousTranslations = {}; // don't step time forwards if paused
+
+    const nowTime = steppingState.time += _paused ? 0 : delta * 1000;
+    const timeStepMs = _timeStep * 1000;
+    const timeSinceLast = nowTime - steppingState.lastTime;
+    steppingState.lastTime = nowTime;
+    steppingState.accumulator += timeSinceLast;
+
+    if (!_paused) {
+      let subSteps = 0;
+
+      while (steppingState.accumulator >= timeStepMs && subSteps < _maxSubSteps) {
+        // Collect previous state
+        world.bodies.forEach(b => {
+          previousTranslations[b.handle] = {
+            rotation: b.rotation(),
+            translation: b.translation()
+          };
+        });
+        world.step(eventQueue);
+        subSteps++;
+        steppingState.accumulator -= timeStepMs;
+      }
     }
 
-    world.step(eventQueue); // Update meshes
+    const interpolationAlpha = steppingState.accumulator % timeStepMs / timeStepMs; // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -524,7 +573,12 @@ const Physics = ({
         return;
       }
 
-      state.setMatrix(_matrix4.compose(rapierVector3ToVector3(rigidBody.translation()), rapierQuaternionToQuaternion(rigidBody.rotation()), state.worldScale).premultiply(state.invertedMatrixWorld));
+      let oldState = previousTranslations[rigidBody.handle];
+      let newTranslation = rapierVector3ToVector3(rigidBody.translation());
+      let newRotation = rapierQuaternionToQuaternion(rigidBody.rotation());
+      let interpolatedTranslation = oldState ? rapierVector3ToVector3(oldState.translation).lerp(newTranslation, interpolationAlpha) : newTranslation;
+      let interpolatedRotation = oldState ? rapierQuaternionToQuaternion(oldState.rotation).slerp(newRotation, interpolationAlpha) : newRotation;
+      state.setMatrix(_matrix4.compose(interpolatedTranslation, interpolatedRotation, state.worldScale).premultiply(state.invertedMatrixWorld));
 
       if (state.mesh instanceof three.InstancedMesh) {
         state.mesh.instanceMatrix.needsUpdate = true;
@@ -574,7 +628,6 @@ const Physics = ({
         });
       }
     });
-    time.current = now;
   });
   const api = React.useMemo(() => createWorldApi(getWorldRef), []);
   const context = React.useMemo(() => ({
@@ -586,8 +639,9 @@ const Physics = ({
     },
     colliderMeshes,
     rigidBodyStates,
-    rigidBodyEvents
-  }), []);
+    rigidBodyEvents,
+    isPaused
+  }), [isPaused]);
   return /*#__PURE__*/React__default["default"].createElement(RapierContext.Provider, {
     value: context
   }, children);
@@ -730,9 +784,15 @@ const useRigidBody = (options = {}) => {
     rigidBody.resetForces(false);
     rigidBody.resetTorques(false);
     const colliderSetting = (_ref = (_options$colliders = options === null || options === void 0 ? void 0 : options.colliders) !== null && _options$colliders !== void 0 ? _options$colliders : physicsOptions.colliders) !== null && _ref !== void 0 ? _ref : false;
-    const autoColliders = colliderSetting !== false ? createCollidersFromChildren(ref.current, rigidBody, _objectSpread2(_objectSpread2({}, options), {}, {
-      colliders: colliderSetting
-    }), world) : [];
+    const autoColliders = colliderSetting !== false ? createCollidersFromChildren({
+      object: ref.current,
+      rigidBody,
+      options: _objectSpread2(_objectSpread2({}, options), {}, {
+        colliders: colliderSetting
+      }),
+      world,
+      ignoreMeshColliders: true
+    }) : [];
     rigidBodyStates.set(rigidBody.handle, {
       mesh: ref.current,
       invertedMatrixWorld: ref.current.parent.matrixWorld.clone().invert(),
@@ -897,9 +957,18 @@ const MeshCollider = ({
       var _ref;
 
       const colliderSetting = (_ref = type !== null && type !== void 0 ? type : physicsOptions.colliders) !== null && _ref !== void 0 ? _ref : false;
-      autoColliders = colliderSetting !== false ? createCollidersFromChildren(object.current, api, _objectSpread2(_objectSpread2({}, options), {}, {
-        colliders: colliderSetting
-      }), world, false) : [];
+
+      if ("raw" in api) {
+        autoColliders = createCollidersFromChildren({
+          object: object.current,
+          rigidBody: api,
+          options: _objectSpread2(_objectSpread2({}, options), {}, {
+            colliders: colliderSetting
+          }),
+          world,
+          ignoreMeshColliders: false
+        });
+      }
     }
 
     return () => {
@@ -1046,7 +1115,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
 
     return instancesRef.current;
   });
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const colliders = [];
     const rigidBodies = instancesRefGetter.current();
 
@@ -1072,15 +1141,21 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
               scale.multiply(s);
             }
 
-            const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
-            );
             const rigidBody = world.createRigidBody(rigidBodyDesc);
             const matrix = new three.Matrix4();
             mesh.getMatrixAt(index, matrix);
             const {
               position,
               rotation
-            } = decomposeMatrix4(matrix); // Set positions
+            } = decomposeMatrix4(matrix);
+
+            if (props.colliders !== false) {
+              const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders !== undefined ? props.colliders : physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
+              );
+              const collider = world.createCollider(colliderDesc, rigidBody);
+              colliders.push(collider);
+            } // Set positions
+
 
             if (props.positions && props.positions[index]) {
               rigidBody.setTranslation(vectorArrayToVector3(props.positions[index]), true);
@@ -1096,7 +1171,6 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
               rigidBody.setRotation(rotation, true);
             }
 
-            const collider = world.createCollider(colliderDesc, rigidBody);
             rigidBodyStates.set(rigidBody.handle, {
               mesh: mesh,
               isSleeping: false,
@@ -1117,7 +1191,6 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
               }
 
             });
-            colliders.push(collider);
             rigidBodies.push({
               rigidBody,
               api
@@ -1136,10 +1209,19 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
   }, []);
-  React.useImperativeHandle(ref, () => createInstancedRigidBodiesApi(instancesRefGetter));
-  return /*#__PURE__*/React__default["default"].createElement("object3D", {
+  const api = React.useMemo(() => createInstancedRigidBodiesApi(instancesRefGetter), []);
+  React.useImperativeHandle(ref, () => api); // console.log(api);
+
+  return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
+    value: {
+      ref: object,
+      api,
+      hasCollisionEvents: false,
+      options: props
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("object3D", {
     ref: object
-  }, props.children);
+  }, props.children));
 });
 
 function _extends() {
@@ -1174,18 +1256,40 @@ const AnyCollider = _ref => {
   const rigidBodyContext = useRigidBodyContext();
   const ref = React.useRef(null);
   React.useEffect(() => {
-    var _rigidBodyContext$api;
-
     const scale = ref.current.getWorldScale(new three.Vector3());
-    const collider = createColliderFromOptions({
-      options: props,
-      world,
-      rigidBody: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : (_rigidBodyContext$api = rigidBodyContext.api) === null || _rigidBodyContext$api === void 0 ? void 0 : _rigidBodyContext$api.raw(),
-      scale,
-      hasCollisionEvents: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.hasCollisionEvents
-    });
+    const colliders = []; // If this is an InstancedRigidBody api
+
+    if (rigidBodyContext && "at" in rigidBodyContext.api) {
+      rigidBodyContext.api.forEach((body, index) => {
+        var _rigidBodyContext$opt, _rigidBodyContext$opt2;
+
+        let instanceScale = scale.clone();
+
+        if ("scales" in rigidBodyContext.options && rigidBodyContext !== null && rigidBodyContext !== void 0 && (_rigidBodyContext$opt = rigidBodyContext.options) !== null && _rigidBodyContext$opt !== void 0 && (_rigidBodyContext$opt2 = _rigidBodyContext$opt.scales) !== null && _rigidBodyContext$opt2 !== void 0 && _rigidBodyContext$opt2[index]) {
+          instanceScale.multiply(vectorArrayToVector3(rigidBodyContext.options.scales[index]));
+        }
+
+        colliders.push(createColliderFromOptions({
+          options: props,
+          world,
+          rigidBody: body.raw(),
+          scale: instanceScale,
+          hasCollisionEvents: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.hasCollisionEvents
+        }));
+      });
+    } else {
+      colliders.push(createColliderFromOptions({
+        options: props,
+        world,
+        // Initiate with a rigidbody, or undefined, because colliders can exist without a rigid body
+        rigidBody: rigidBodyContext && "raw" in rigidBodyContext.api ? rigidBodyContext.api.raw() : undefined,
+        scale,
+        hasCollisionEvents: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.hasCollisionEvents
+      }));
+    }
+
     return () => {
-      world.removeCollider(collider);
+      colliders.forEach(collider => world.removeCollider(collider));
     };
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("object3D", {

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

@@ -154,13 +154,19 @@ const isChildOfMeshCollider = child => {
   return flag;
 };
 
-const createCollidersFromChildren = (object, rigidBody, options, world, ignoreMeshColliders = true) => {
+const createCollidersFromChildren = ({
+  object,
+  rigidBody,
+  options,
+  world,
+  ignoreMeshColliders: _ignoreMeshColliders = true
+}) => {
   const hasCollisionEvents = !!(options.onCollisionEnter || options.onCollisionExit);
   const colliders = [];
   new three.Vector3();
-  object.traverse(child => {
+  object.traverseVisible(child => {
     if ("isMesh" in child) {
-      if (ignoreMeshColliders && isChildOfMeshCollider(child)) return;
+      if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
       const {
         geometry
       } = child;
@@ -201,7 +207,7 @@ const createCollidersFromChildren = (object, rigidBody, options, world, ignoreMe
         z: rz,
         w: rw
       });
-      const actualRigidBody = world.getRigidBody(rigidBody === null || rigidBody === void 0 ? void 0 : rigidBody.handle);
+      const actualRigidBody = rigidBody ? world.getRigidBody(rigidBody.handle) : undefined;
       const collider = world.createCollider(desc, actualRigidBody);
       colliders.push(collider);
     }
@@ -267,11 +273,13 @@ const scaleVertices = (vertices, scale) => {
   return scaledVerts;
 };
 const rigidBodyDescFromOptions = options => {
-  var _options$linearVeloci, _options$angularVeloc, _options$gravityScale, _options$canSleep, _options$ccd, _options$enabledRotat, _options$enabledTrans;
+  var _options$linearVeloci, _options$angularVeloc, _options$angularDampi, _options$linearDampin, _options$gravityScale, _options$canSleep, _options$ccd, _options$enabledRotat, _options$enabledTrans;
 
   const type = rigidBodyTypeFromString((options === null || options === void 0 ? void 0 : options.type) || "dynamic");
   const [lvx, lvy, lvz] = (_options$linearVeloci = options === null || options === void 0 ? void 0 : options.linearVelocity) !== null && _options$linearVeloci !== void 0 ? _options$linearVeloci : [0, 0, 0];
   const [avx, avy, avz] = (_options$angularVeloc = options === null || options === void 0 ? void 0 : options.angularVelocity) !== null && _options$angularVeloc !== void 0 ? _options$angularVeloc : [0, 0, 0];
+  const angularDamping = (_options$angularDampi = options === null || options === void 0 ? void 0 : options.angularDamping) !== null && _options$angularDampi !== void 0 ? _options$angularDampi : 0;
+  const linearDamping = (_options$linearDampin = options === null || options === void 0 ? void 0 : options.linearDamping) !== null && _options$linearDampin !== void 0 ? _options$linearDampin : 0;
   const gravityScale = (_options$gravityScale = options === null || options === void 0 ? void 0 : options.gravityScale) !== null && _options$gravityScale !== void 0 ? _options$gravityScale : 1;
   const canSleep = (_options$canSleep = options === null || options === void 0 ? void 0 : options.canSleep) !== null && _options$canSleep !== void 0 ? _options$canSleep : true;
   const ccdEnabled = (_options$ccd = options === null || options === void 0 ? void 0 : options.ccd) !== null && _options$ccd !== void 0 ? _options$ccd : false;
@@ -281,7 +289,7 @@ const rigidBodyDescFromOptions = options => {
     x: avx,
     y: avy,
     z: avz
-  }).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled).enabledRotations(erx, ery, erz).enabledTranslations(etx, ety, etz);
+  }).setLinearDamping(linearDamping).setAngularDamping(angularDamping).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled).enabledRotations(erx, ery, erz).enabledTranslations(etx, ety, etz);
   if (options.lockRotations) desc.lockRotations();
   if (options.lockTranslations) desc.lockTranslations();
   return desc;
@@ -366,6 +374,18 @@ const createRigidBodyApi = ref => {
     },
 
     setAngvel: velocity => ref.current().setAngvel(velocity, true),
+
+    linearDamping() {
+      return ref.current().linearDamping();
+    },
+
+    setLinearDamping: factor => ref.current().setLinearDamping(factor),
+
+    angularDamping() {
+      return ref.current().angularDamping();
+    },
+
+    setAngularDamping: factor => ref.current().setAngularDamping(factor),
     setNextKinematicRotation: ({
       x,
       y,
@@ -449,9 +469,15 @@ const Physics = ({
   colliders: _colliders = "cuboid",
   gravity: _gravity = [0, -9.81, 0],
   children,
-  timeStep: _timeStep = "vary"
+  timeStep: _timeStep = 1 / 60,
+  maxSubSteps: _maxSubSteps = 10,
+  paused: _paused = false
 }) => {
   const rapier = useAsset.useAsset(importRapier);
+  const [isPaused, setIsPaused] = React.useState(_paused);
+  React.useEffect(() => {
+    setIsPaused(_paused);
+  }, [_paused]);
   const worldRef = React.useRef();
   const getWorldRef = React.useRef(() => {
     if (!worldRef.current) {
@@ -471,7 +497,6 @@ const Physics = ({
     return () => {
       if (world) {
         world.free();
-        worldRef.current = undefined;
       }
     };
   }, []); // Update gravity
@@ -483,22 +508,46 @@ const Physics = ({
       world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
-  const time = React.useRef(performance.now());
-  fiber.useFrame(context => {
+  const [steppingState] = React.useState({
+    time: 0,
+    lastTime: 0,
+    accumulator: 0
+  });
+  fiber.useFrame((_, delta) => {
     const world = worldRef.current;
-    if (!world) return; // Set timestep to current delta, to allow for variable frame rates
-    // We cap the delta at 100, so that the physics simulation doesn't get wild
-
-    const now = performance.now();
-    const delta = Math.min(100, now - time.current);
-
-    if (_timeStep === "vary") {
-      world.timestep = delta / 1000;
-    } else {
-      world.timestep = _timeStep;
+    if (!world) return;
+    world.timestep = _timeStep;
+    /**
+     * Fixed timeStep simulation progression
+     * @see https://gafferongames.com/post/fix_your_timestep/ 
+    */
+
+    let previousTranslations = {}; // don't step time forwards if paused
+
+    const nowTime = steppingState.time += _paused ? 0 : delta * 1000;
+    const timeStepMs = _timeStep * 1000;
+    const timeSinceLast = nowTime - steppingState.lastTime;
+    steppingState.lastTime = nowTime;
+    steppingState.accumulator += timeSinceLast;
+
+    if (!_paused) {
+      let subSteps = 0;
+
+      while (steppingState.accumulator >= timeStepMs && subSteps < _maxSubSteps) {
+        // Collect previous state
+        world.bodies.forEach(b => {
+          previousTranslations[b.handle] = {
+            rotation: b.rotation(),
+            translation: b.translation()
+          };
+        });
+        world.step(eventQueue);
+        subSteps++;
+        steppingState.accumulator -= timeStepMs;
+      }
     }
 
-    world.step(eventQueue); // Update meshes
+    const interpolationAlpha = steppingState.accumulator % timeStepMs / timeStepMs; // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -524,7 +573,12 @@ const Physics = ({
         return;
       }
 
-      state.setMatrix(_matrix4.compose(rapierVector3ToVector3(rigidBody.translation()), rapierQuaternionToQuaternion(rigidBody.rotation()), state.worldScale).premultiply(state.invertedMatrixWorld));
+      let oldState = previousTranslations[rigidBody.handle];
+      let newTranslation = rapierVector3ToVector3(rigidBody.translation());
+      let newRotation = rapierQuaternionToQuaternion(rigidBody.rotation());
+      let interpolatedTranslation = oldState ? rapierVector3ToVector3(oldState.translation).lerp(newTranslation, interpolationAlpha) : newTranslation;
+      let interpolatedRotation = oldState ? rapierQuaternionToQuaternion(oldState.rotation).slerp(newRotation, interpolationAlpha) : newRotation;
+      state.setMatrix(_matrix4.compose(interpolatedTranslation, interpolatedRotation, state.worldScale).premultiply(state.invertedMatrixWorld));
 
       if (state.mesh instanceof three.InstancedMesh) {
         state.mesh.instanceMatrix.needsUpdate = true;
@@ -574,7 +628,6 @@ const Physics = ({
         });
       }
     });
-    time.current = now;
   });
   const api = React.useMemo(() => createWorldApi(getWorldRef), []);
   const context = React.useMemo(() => ({
@@ -586,8 +639,9 @@ const Physics = ({
     },
     colliderMeshes,
     rigidBodyStates,
-    rigidBodyEvents
-  }), []);
+    rigidBodyEvents,
+    isPaused
+  }), [isPaused]);
   return /*#__PURE__*/React__default["default"].createElement(RapierContext.Provider, {
     value: context
   }, children);
@@ -730,9 +784,15 @@ const useRigidBody = (options = {}) => {
     rigidBody.resetForces(false);
     rigidBody.resetTorques(false);
     const colliderSetting = (_ref = (_options$colliders = options === null || options === void 0 ? void 0 : options.colliders) !== null && _options$colliders !== void 0 ? _options$colliders : physicsOptions.colliders) !== null && _ref !== void 0 ? _ref : false;
-    const autoColliders = colliderSetting !== false ? createCollidersFromChildren(ref.current, rigidBody, _objectSpread2(_objectSpread2({}, options), {}, {
-      colliders: colliderSetting
-    }), world) : [];
+    const autoColliders = colliderSetting !== false ? createCollidersFromChildren({
+      object: ref.current,
+      rigidBody,
+      options: _objectSpread2(_objectSpread2({}, options), {}, {
+        colliders: colliderSetting
+      }),
+      world,
+      ignoreMeshColliders: true
+    }) : [];
     rigidBodyStates.set(rigidBody.handle, {
       mesh: ref.current,
       invertedMatrixWorld: ref.current.parent.matrixWorld.clone().invert(),
@@ -897,9 +957,18 @@ const MeshCollider = ({
       var _ref;
 
       const colliderSetting = (_ref = type !== null && type !== void 0 ? type : physicsOptions.colliders) !== null && _ref !== void 0 ? _ref : false;
-      autoColliders = colliderSetting !== false ? createCollidersFromChildren(object.current, api, _objectSpread2(_objectSpread2({}, options), {}, {
-        colliders: colliderSetting
-      }), world, false) : [];
+
+      if ("raw" in api) {
+        autoColliders = createCollidersFromChildren({
+          object: object.current,
+          rigidBody: api,
+          options: _objectSpread2(_objectSpread2({}, options), {}, {
+            colliders: colliderSetting
+          }),
+          world,
+          ignoreMeshColliders: false
+        });
+      }
     }
 
     return () => {
@@ -1046,7 +1115,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
 
     return instancesRef.current;
   });
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const colliders = [];
     const rigidBodies = instancesRefGetter.current();
 
@@ -1072,15 +1141,21 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
               scale.multiply(s);
             }
 
-            const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
-            );
             const rigidBody = world.createRigidBody(rigidBodyDesc);
             const matrix = new three.Matrix4();
             mesh.getMatrixAt(index, matrix);
             const {
               position,
               rotation
-            } = decomposeMatrix4(matrix); // Set positions
+            } = decomposeMatrix4(matrix);
+
+            if (props.colliders !== false) {
+              const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders !== undefined ? props.colliders : physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
+              );
+              const collider = world.createCollider(colliderDesc, rigidBody);
+              colliders.push(collider);
+            } // Set positions
+
 
             if (props.positions && props.positions[index]) {
               rigidBody.setTranslation(vectorArrayToVector3(props.positions[index]), true);
@@ -1096,7 +1171,6 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
               rigidBody.setRotation(rotation, true);
             }
 
-            const collider = world.createCollider(colliderDesc, rigidBody);
             rigidBodyStates.set(rigidBody.handle, {
               mesh: mesh,
               isSleeping: false,
@@ -1117,7 +1191,6 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
               }
 
             });
-            colliders.push(collider);
             rigidBodies.push({
               rigidBody,
               api
@@ -1136,10 +1209,19 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
   }, []);
-  React.useImperativeHandle(ref, () => createInstancedRigidBodiesApi(instancesRefGetter));
-  return /*#__PURE__*/React__default["default"].createElement("object3D", {
+  const api = React.useMemo(() => createInstancedRigidBodiesApi(instancesRefGetter), []);
+  React.useImperativeHandle(ref, () => api); // console.log(api);
+
+  return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
+    value: {
+      ref: object,
+      api,
+      hasCollisionEvents: false,
+      options: props
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("object3D", {
     ref: object
-  }, props.children);
+  }, props.children));
 });
 
 function _extends() {
@@ -1174,18 +1256,40 @@ const AnyCollider = _ref => {
   const rigidBodyContext = useRigidBodyContext();
   const ref = React.useRef(null);
   React.useEffect(() => {
-    var _rigidBodyContext$api;
-
     const scale = ref.current.getWorldScale(new three.Vector3());
-    const collider = createColliderFromOptions({
-      options: props,
-      world,
-      rigidBody: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : (_rigidBodyContext$api = rigidBodyContext.api) === null || _rigidBodyContext$api === void 0 ? void 0 : _rigidBodyContext$api.raw(),
-      scale,
-      hasCollisionEvents: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.hasCollisionEvents
-    });
+    const colliders = []; // If this is an InstancedRigidBody api
+
+    if (rigidBodyContext && "at" in rigidBodyContext.api) {
+      rigidBodyContext.api.forEach((body, index) => {
+        var _rigidBodyContext$opt, _rigidBodyContext$opt2;
+
+        let instanceScale = scale.clone();
+
+        if ("scales" in rigidBodyContext.options && rigidBodyContext !== null && rigidBodyContext !== void 0 && (_rigidBodyContext$opt = rigidBodyContext.options) !== null && _rigidBodyContext$opt !== void 0 && (_rigidBodyContext$opt2 = _rigidBodyContext$opt.scales) !== null && _rigidBodyContext$opt2 !== void 0 && _rigidBodyContext$opt2[index]) {
+          instanceScale.multiply(vectorArrayToVector3(rigidBodyContext.options.scales[index]));
+        }
+
+        colliders.push(createColliderFromOptions({
+          options: props,
+          world,
+          rigidBody: body.raw(),
+          scale: instanceScale,
+          hasCollisionEvents: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.hasCollisionEvents
+        }));
+      });
+    } else {
+      colliders.push(createColliderFromOptions({
+        options: props,
+        world,
+        // Initiate with a rigidbody, or undefined, because colliders can exist without a rigid body
+        rigidBody: rigidBodyContext && "raw" in rigidBodyContext.api ? rigidBodyContext.api.raw() : undefined,
+        scale,
+        hasCollisionEvents: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.hasCollisionEvents
+      }));
+    }
+
     return () => {
-      world.removeCollider(collider);
+      colliders.forEach(collider => world.removeCollider(collider));
     };
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("object3D", {

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

@@ -1,6 +1,6 @@
 import { ColliderDesc, ActiveEvents, RigidBodyDesc, CoefficientCombineRule, EventQueue, ShapeType } from '@dimforge/rapier3d-compat';
 export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody } from '@dimforge/rapier3d-compat';
-import React, { useRef, useState, useEffect, useMemo, createContext, useContext, forwardRef, useImperativeHandle, memo } from 'react';
+import React, { useState, useEffect, useRef, useMemo, createContext, useContext, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
 import { useAsset } from 'use-asset';
 import { useFrame } from '@react-three/fiber';
 import { Quaternion, Euler, Vector3, Object3D, Matrix4, InstancedMesh, CylinderBufferGeometry, BufferGeometry, BufferAttribute, SphereBufferGeometry, BoxBufferGeometry, DynamicDrawUsage } from 'three';
@@ -129,13 +129,19 @@ const isChildOfMeshCollider = child => {
   return flag;
 };
 
-const createCollidersFromChildren = (object, rigidBody, options, world, ignoreMeshColliders = true) => {
+const createCollidersFromChildren = ({
+  object,
+  rigidBody,
+  options,
+  world,
+  ignoreMeshColliders: _ignoreMeshColliders = true
+}) => {
   const hasCollisionEvents = !!(options.onCollisionEnter || options.onCollisionExit);
   const colliders = [];
   new Vector3();
-  object.traverse(child => {
+  object.traverseVisible(child => {
     if ("isMesh" in child) {
-      if (ignoreMeshColliders && isChildOfMeshCollider(child)) return;
+      if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
       const {
         geometry
       } = child;
@@ -176,7 +182,7 @@ const createCollidersFromChildren = (object, rigidBody, options, world, ignoreMe
         z: rz,
         w: rw
       });
-      const actualRigidBody = world.getRigidBody(rigidBody === null || rigidBody === void 0 ? void 0 : rigidBody.handle);
+      const actualRigidBody = rigidBody ? world.getRigidBody(rigidBody.handle) : undefined;
       const collider = world.createCollider(desc, actualRigidBody);
       colliders.push(collider);
     }
@@ -242,11 +248,13 @@ const scaleVertices = (vertices, scale) => {
   return scaledVerts;
 };
 const rigidBodyDescFromOptions = options => {
-  var _options$linearVeloci, _options$angularVeloc, _options$gravityScale, _options$canSleep, _options$ccd, _options$enabledRotat, _options$enabledTrans;
+  var _options$linearVeloci, _options$angularVeloc, _options$angularDampi, _options$linearDampin, _options$gravityScale, _options$canSleep, _options$ccd, _options$enabledRotat, _options$enabledTrans;
 
   const type = rigidBodyTypeFromString((options === null || options === void 0 ? void 0 : options.type) || "dynamic");
   const [lvx, lvy, lvz] = (_options$linearVeloci = options === null || options === void 0 ? void 0 : options.linearVelocity) !== null && _options$linearVeloci !== void 0 ? _options$linearVeloci : [0, 0, 0];
   const [avx, avy, avz] = (_options$angularVeloc = options === null || options === void 0 ? void 0 : options.angularVelocity) !== null && _options$angularVeloc !== void 0 ? _options$angularVeloc : [0, 0, 0];
+  const angularDamping = (_options$angularDampi = options === null || options === void 0 ? void 0 : options.angularDamping) !== null && _options$angularDampi !== void 0 ? _options$angularDampi : 0;
+  const linearDamping = (_options$linearDampin = options === null || options === void 0 ? void 0 : options.linearDamping) !== null && _options$linearDampin !== void 0 ? _options$linearDampin : 0;
   const gravityScale = (_options$gravityScale = options === null || options === void 0 ? void 0 : options.gravityScale) !== null && _options$gravityScale !== void 0 ? _options$gravityScale : 1;
   const canSleep = (_options$canSleep = options === null || options === void 0 ? void 0 : options.canSleep) !== null && _options$canSleep !== void 0 ? _options$canSleep : true;
   const ccdEnabled = (_options$ccd = options === null || options === void 0 ? void 0 : options.ccd) !== null && _options$ccd !== void 0 ? _options$ccd : false;
@@ -256,7 +264,7 @@ const rigidBodyDescFromOptions = options => {
     x: avx,
     y: avy,
     z: avz
-  }).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled).enabledRotations(erx, ery, erz).enabledTranslations(etx, ety, etz);
+  }).setLinearDamping(linearDamping).setAngularDamping(angularDamping).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled).enabledRotations(erx, ery, erz).enabledTranslations(etx, ety, etz);
   if (options.lockRotations) desc.lockRotations();
   if (options.lockTranslations) desc.lockTranslations();
   return desc;
@@ -341,6 +349,18 @@ const createRigidBodyApi = ref => {
     },
 
     setAngvel: velocity => ref.current().setAngvel(velocity, true),
+
+    linearDamping() {
+      return ref.current().linearDamping();
+    },
+
+    setLinearDamping: factor => ref.current().setLinearDamping(factor),
+
+    angularDamping() {
+      return ref.current().angularDamping();
+    },
+
+    setAngularDamping: factor => ref.current().setAngularDamping(factor),
     setNextKinematicRotation: ({
       x,
       y,
@@ -424,9 +444,15 @@ const Physics = ({
   colliders: _colliders = "cuboid",
   gravity: _gravity = [0, -9.81, 0],
   children,
-  timeStep: _timeStep = "vary"
+  timeStep: _timeStep = 1 / 60,
+  maxSubSteps: _maxSubSteps = 10,
+  paused: _paused = false
 }) => {
   const rapier = useAsset(importRapier);
+  const [isPaused, setIsPaused] = useState(_paused);
+  useEffect(() => {
+    setIsPaused(_paused);
+  }, [_paused]);
   const worldRef = useRef();
   const getWorldRef = useRef(() => {
     if (!worldRef.current) {
@@ -446,7 +472,6 @@ const Physics = ({
     return () => {
       if (world) {
         world.free();
-        worldRef.current = undefined;
       }
     };
   }, []); // Update gravity
@@ -458,22 +483,46 @@ const Physics = ({
       world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
-  const time = useRef(performance.now());
-  useFrame(context => {
+  const [steppingState] = useState({
+    time: 0,
+    lastTime: 0,
+    accumulator: 0
+  });
+  useFrame((_, delta) => {
     const world = worldRef.current;
-    if (!world) return; // Set timestep to current delta, to allow for variable frame rates
-    // We cap the delta at 100, so that the physics simulation doesn't get wild
-
-    const now = performance.now();
-    const delta = Math.min(100, now - time.current);
-
-    if (_timeStep === "vary") {
-      world.timestep = delta / 1000;
-    } else {
-      world.timestep = _timeStep;
+    if (!world) return;
+    world.timestep = _timeStep;
+    /**
+     * Fixed timeStep simulation progression
+     * @see https://gafferongames.com/post/fix_your_timestep/ 
+    */
+
+    let previousTranslations = {}; // don't step time forwards if paused
+
+    const nowTime = steppingState.time += _paused ? 0 : delta * 1000;
+    const timeStepMs = _timeStep * 1000;
+    const timeSinceLast = nowTime - steppingState.lastTime;
+    steppingState.lastTime = nowTime;
+    steppingState.accumulator += timeSinceLast;
+
+    if (!_paused) {
+      let subSteps = 0;
+
+      while (steppingState.accumulator >= timeStepMs && subSteps < _maxSubSteps) {
+        // Collect previous state
+        world.bodies.forEach(b => {
+          previousTranslations[b.handle] = {
+            rotation: b.rotation(),
+            translation: b.translation()
+          };
+        });
+        world.step(eventQueue);
+        subSteps++;
+        steppingState.accumulator -= timeStepMs;
+      }
     }
 
-    world.step(eventQueue); // Update meshes
+    const interpolationAlpha = steppingState.accumulator % timeStepMs / timeStepMs; // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -499,7 +548,12 @@ const Physics = ({
         return;
       }
 
-      state.setMatrix(_matrix4.compose(rapierVector3ToVector3(rigidBody.translation()), rapierQuaternionToQuaternion(rigidBody.rotation()), state.worldScale).premultiply(state.invertedMatrixWorld));
+      let oldState = previousTranslations[rigidBody.handle];
+      let newTranslation = rapierVector3ToVector3(rigidBody.translation());
+      let newRotation = rapierQuaternionToQuaternion(rigidBody.rotation());
+      let interpolatedTranslation = oldState ? rapierVector3ToVector3(oldState.translation).lerp(newTranslation, interpolationAlpha) : newTranslation;
+      let interpolatedRotation = oldState ? rapierQuaternionToQuaternion(oldState.rotation).slerp(newRotation, interpolationAlpha) : newRotation;
+      state.setMatrix(_matrix4.compose(interpolatedTranslation, interpolatedRotation, state.worldScale).premultiply(state.invertedMatrixWorld));
 
       if (state.mesh instanceof InstancedMesh) {
         state.mesh.instanceMatrix.needsUpdate = true;
@@ -549,7 +603,6 @@ const Physics = ({
         });
       }
     });
-    time.current = now;
   });
   const api = useMemo(() => createWorldApi(getWorldRef), []);
   const context = useMemo(() => ({
@@ -561,8 +614,9 @@ const Physics = ({
     },
     colliderMeshes,
     rigidBodyStates,
-    rigidBodyEvents
-  }), []);
+    rigidBodyEvents,
+    isPaused
+  }), [isPaused]);
   return /*#__PURE__*/React.createElement(RapierContext.Provider, {
     value: context
   }, children);
@@ -705,9 +759,15 @@ const useRigidBody = (options = {}) => {
     rigidBody.resetForces(false);
     rigidBody.resetTorques(false);
     const colliderSetting = (_ref = (_options$colliders = options === null || options === void 0 ? void 0 : options.colliders) !== null && _options$colliders !== void 0 ? _options$colliders : physicsOptions.colliders) !== null && _ref !== void 0 ? _ref : false;
-    const autoColliders = colliderSetting !== false ? createCollidersFromChildren(ref.current, rigidBody, _objectSpread2(_objectSpread2({}, options), {}, {
-      colliders: colliderSetting
-    }), world) : [];
+    const autoColliders = colliderSetting !== false ? createCollidersFromChildren({
+      object: ref.current,
+      rigidBody,
+      options: _objectSpread2(_objectSpread2({}, options), {}, {
+        colliders: colliderSetting
+      }),
+      world,
+      ignoreMeshColliders: true
+    }) : [];
     rigidBodyStates.set(rigidBody.handle, {
       mesh: ref.current,
       invertedMatrixWorld: ref.current.parent.matrixWorld.clone().invert(),
@@ -872,9 +932,18 @@ const MeshCollider = ({
       var _ref;
 
       const colliderSetting = (_ref = type !== null && type !== void 0 ? type : physicsOptions.colliders) !== null && _ref !== void 0 ? _ref : false;
-      autoColliders = colliderSetting !== false ? createCollidersFromChildren(object.current, api, _objectSpread2(_objectSpread2({}, options), {}, {
-        colliders: colliderSetting
-      }), world, false) : [];
+
+      if ("raw" in api) {
+        autoColliders = createCollidersFromChildren({
+          object: object.current,
+          rigidBody: api,
+          options: _objectSpread2(_objectSpread2({}, options), {}, {
+            colliders: colliderSetting
+          }),
+          world,
+          ignoreMeshColliders: false
+        });
+      }
     }
 
     return () => {
@@ -1021,7 +1090,7 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
 
     return instancesRef.current;
   });
-  useEffect(() => {
+  useLayoutEffect(() => {
     const colliders = [];
     const rigidBodies = instancesRefGetter.current();
 
@@ -1047,15 +1116,21 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
               scale.multiply(s);
             }
 
-            const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
-            );
             const rigidBody = world.createRigidBody(rigidBodyDesc);
             const matrix = new Matrix4();
             mesh.getMatrixAt(index, matrix);
             const {
               position,
               rotation
-            } = decomposeMatrix4(matrix); // Set positions
+            } = decomposeMatrix4(matrix);
+
+            if (props.colliders !== false) {
+              const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders !== undefined ? props.colliders : physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
+              );
+              const collider = world.createCollider(colliderDesc, rigidBody);
+              colliders.push(collider);
+            } // Set positions
+
 
             if (props.positions && props.positions[index]) {
               rigidBody.setTranslation(vectorArrayToVector3(props.positions[index]), true);
@@ -1071,7 +1146,6 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
               rigidBody.setRotation(rotation, true);
             }
 
-            const collider = world.createCollider(colliderDesc, rigidBody);
             rigidBodyStates.set(rigidBody.handle, {
               mesh: mesh,
               isSleeping: false,
@@ -1092,7 +1166,6 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
               }
 
             });
-            colliders.push(collider);
             rigidBodies.push({
               rigidBody,
               api
@@ -1111,10 +1184,19 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
       };
     }
   }, []);
-  useImperativeHandle(ref, () => createInstancedRigidBodiesApi(instancesRefGetter));
-  return /*#__PURE__*/React.createElement("object3D", {
+  const api = useMemo(() => createInstancedRigidBodiesApi(instancesRefGetter), []);
+  useImperativeHandle(ref, () => api); // console.log(api);
+
+  return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
+    value: {
+      ref: object,
+      api,
+      hasCollisionEvents: false,
+      options: props
+    }
+  }, /*#__PURE__*/React.createElement("object3D", {
     ref: object
-  }, props.children);
+  }, props.children));
 });
 
 function _extends() {
@@ -1149,18 +1231,40 @@ const AnyCollider = _ref => {
   const rigidBodyContext = useRigidBodyContext();
   const ref = useRef(null);
   useEffect(() => {
-    var _rigidBodyContext$api;
-
     const scale = ref.current.getWorldScale(new Vector3());
-    const collider = createColliderFromOptions({
-      options: props,
-      world,
-      rigidBody: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : (_rigidBodyContext$api = rigidBodyContext.api) === null || _rigidBodyContext$api === void 0 ? void 0 : _rigidBodyContext$api.raw(),
-      scale,
-      hasCollisionEvents: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.hasCollisionEvents
-    });
+    const colliders = []; // If this is an InstancedRigidBody api
+
+    if (rigidBodyContext && "at" in rigidBodyContext.api) {
+      rigidBodyContext.api.forEach((body, index) => {
+        var _rigidBodyContext$opt, _rigidBodyContext$opt2;
+
+        let instanceScale = scale.clone();
+
+        if ("scales" in rigidBodyContext.options && rigidBodyContext !== null && rigidBodyContext !== void 0 && (_rigidBodyContext$opt = rigidBodyContext.options) !== null && _rigidBodyContext$opt !== void 0 && (_rigidBodyContext$opt2 = _rigidBodyContext$opt.scales) !== null && _rigidBodyContext$opt2 !== void 0 && _rigidBodyContext$opt2[index]) {
+          instanceScale.multiply(vectorArrayToVector3(rigidBodyContext.options.scales[index]));
+        }
+
+        colliders.push(createColliderFromOptions({
+          options: props,
+          world,
+          rigidBody: body.raw(),
+          scale: instanceScale,
+          hasCollisionEvents: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.hasCollisionEvents
+        }));
+      });
+    } else {
+      colliders.push(createColliderFromOptions({
+        options: props,
+        world,
+        // Initiate with a rigidbody, or undefined, because colliders can exist without a rigid body
+        rigidBody: rigidBodyContext && "raw" in rigidBodyContext.api ? rigidBodyContext.api.raw() : undefined,
+        scale,
+        hasCollisionEvents: rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.hasCollisionEvents
+      }));
+    }
+
     return () => {
-      world.removeCollider(collider);
+      colliders.forEach(collider => world.removeCollider(collider));
     };
   }, []);
   return /*#__PURE__*/React.createElement("object3D", {

package/package.json

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

package/readme.md

@@ -2,6 +2,11 @@
   <img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/hero.svg" alt="@react-three/rapier" />
 </p>
 
+<p align="center">
+  <img src="https://img.shields.io/npm/v/@react-three/rapier?style=for-the-badge&colorA=0099DA&colorB=ffffff" />
+  <img src="https://img.shields.io/discord/740090768164651008?style=for-the-badge&colorA=0099DA&colorB=ffffff&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ" />
+</p>
+
 <p align="center">⚠️ Under heavy development. All APIs are subject to change. ⚠️</p>
 
 ## Usage
@@ -121,6 +126,8 @@ Instanced meshes can also be used and have automatic colliders generated from th
 
 By wrapping the `InstancedMesh` in `<InstancedRigidBodies />`, each instance will be attached to an individual `RigidBody`.
 
+> Note: Custom colliders (compound shapes) for InstancedMesh is currently not supported
+
 ```tsx
 import { InstancedRigidBodies } from "@react-three/rapier";
 
@@ -166,6 +173,8 @@ const Scene = () => {
       <instancedMesh args={[undefined, undefined, COUNT]}>
         <sphereBufferGeometry args={[0.2]} />
         <meshPhysicalGeometry color="blue" />
+
+        <CuboidCollider args={[0.1, 0.2, 0.1]} />
       </instancedMesh>
     </InstancedRigidBodies>
   );
@@ -242,6 +251,7 @@ In order, but also not necessarily:
 - [x] Collision events
 - [x] Colliders outside RigidBodies
 - [x] InstancedMesh support
+- [x] Timestep improvements for determinism
 - [ ] Normalize and improve collision events (add events to single Colliders, InstancedRigidBodies, etc)
 - [ ] Docs
 - [ ] CodeSandbox examples