@react-three/rapier 0.6.0 → 0.6.3

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var rapier3dCompat = require('@dimforge/rapier3d-compat');
-var React$1 = require('react');
+var React = require('react');
 var useAsset = require('use-asset');
 var fiber = require('@react-three/fiber');
 var three = require('three');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefault(React$1);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 const _quaternion = new three.Quaternion();
 const _euler = new three.Euler();
@@ -36,13 +36,9 @@ const _vector3 = new three.Vector3();
 new three.Object3D();
 const _matrix4 = new three.Matrix4();
 
-const vectorArrayToObject = arr => {
+const vectorArrayToVector3 = arr => {
   const [x, y, z] = arr;
-  return {
-    x,
-    y,
-    z
-  };
+  return new three.Vector3(x, y, z);
 };
 const vector3ToQuaternion = v => {
   return _quaternion.setFromEuler(_euler.setFromVector3(v));
@@ -158,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;
@@ -205,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);
     }
@@ -271,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;
@@ -285,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;
@@ -370,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,
@@ -441,7 +457,7 @@ const createJointApi = ref => {
   };
 };
 
-const RapierContext = /*#__PURE__*/React$1.createContext(undefined);
+const RapierContext = /*#__PURE__*/React.createContext(undefined);
 
 const importRapier = async () => {
   let r = await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@dimforge/rapier3d-compat')); });
@@ -453,24 +469,25 @@ const Physics = ({
   colliders: _colliders = "cuboid",
   gravity: _gravity = [0, -9.81, 0],
   children,
-  timeStep: _timeStep = "vary"
+  timeStep: _timeStep = "vary",
+  paused: _paused = false
 }) => {
   const rapier = useAsset.useAsset(importRapier);
-  const worldRef = React$1.useRef();
-  const getWorldRef = React$1.useRef(() => {
+  const worldRef = React.useRef();
+  const getWorldRef = React.useRef(() => {
     if (!worldRef.current) {
-      const world = new rapier.World(vectorArrayToObject(_gravity));
+      const world = new rapier.World(vectorArrayToVector3(_gravity));
       worldRef.current = world;
     }
 
     return worldRef.current;
   });
-  const [colliderMeshes] = React$1.useState(() => new Map());
-  const [rigidBodyStates] = React$1.useState(() => new Map());
-  const [rigidBodyEvents] = React$1.useState(() => new Map());
-  const [eventQueue] = React$1.useState(() => new rapier3dCompat.EventQueue(false)); // Init world
+  const [colliderMeshes] = React.useState(() => new Map());
+  const [rigidBodyStates] = React.useState(() => new Map());
+  const [rigidBodyEvents] = React.useState(() => new Map());
+  const [eventQueue] = React.useState(() => new rapier3dCompat.EventQueue(false)); // Init world
 
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const world = getWorldRef.current();
     return () => {
       if (world) {
@@ -480,14 +497,14 @@ const Physics = ({
     };
   }, []); // Update gravity
 
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const world = worldRef.current;
 
     if (world) {
-      world.gravity = vectorArrayToObject(_gravity);
+      world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
-  const time = React$1.useRef(performance.now());
+  const time = React.useRef(performance.now());
   fiber.useFrame(context => {
     const world = worldRef.current;
     if (!world) return; // Set timestep to current delta, to allow for variable frame rates
@@ -502,7 +519,7 @@ const Physics = ({
       world.timestep = _timeStep;
     }
 
-    world.step(eventQueue); // Update meshes
+    if (!_paused) world.step(eventQueue); // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -580,8 +597,8 @@ const Physics = ({
     });
     time.current = now;
   });
-  const api = React$1.useMemo(() => createWorldApi(getWorldRef), []);
-  const context = React$1.useMemo(() => ({
+  const api = React.useMemo(() => createWorldApi(getWorldRef), []);
+  const context = React.useMemo(() => ({
     rapier,
     world: api,
     physicsOptions: {
@@ -673,7 +690,7 @@ function _objectSpread2(target) {
 }
 
 const useRapier = () => {
-  return React$1.useContext(RapierContext);
+  return React.useContext(RapierContext);
 };
 const useRigidBody = (options = {}) => {
   const {
@@ -682,10 +699,10 @@ const useRigidBody = (options = {}) => {
     physicsOptions,
     rigidBodyEvents
   } = useRapier();
-  const ref = React$1.useRef(); // Create rigidbody
+  const ref = React.useRef(); // Create rigidbody
 
-  const rigidBodyRef = React$1.useRef();
-  const getRigidBodyRef = React$1.useRef(() => {
+  const rigidBodyRef = React.useRef();
+  const getRigidBodyRef = React.useRef(() => {
     if (!rigidBodyRef.current) {
       const desc = rigidBodyDescFromOptions(options);
       const rigidBody = world.createRigidBody(desc);
@@ -695,7 +712,7 @@ const useRigidBody = (options = {}) => {
     return rigidBodyRef.current;
   }); // Setup
 
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     var _ref$current$parent, _ref, _options$colliders;
 
     const rigidBody = getRigidBodyRef.current();
@@ -734,15 +751,22 @@ 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(),
       isSleeping: false,
       worldScale: ref.current.getWorldScale(_vector3).clone(),
-      setMatrix: mat => ref.current.matrix.copy(mat)
+      setMatrix: mat => ref.current.matrix.copy(mat),
+      getMatrix: () => ref.current.matrix
     });
     ref.current.matrixAutoUpdate = false;
     return () => {
@@ -753,7 +777,7 @@ const useRigidBody = (options = {}) => {
     };
   }, []); // Events
 
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const rigidBody = getRigidBodyRef.current();
     rigidBodyEvents.set(rigidBody.handle, {
       onCollisionEnter: options === null || options === void 0 ? void 0 : options.onCollisionEnter,
@@ -765,7 +789,7 @@ const useRigidBody = (options = {}) => {
       rigidBodyEvents.delete(rigidBody.handle);
     };
   }, [options.onCollisionEnter, options.onCollisionExit]);
-  const api = React$1.useMemo(() => createRigidBodyApi(getRigidBodyRef), []);
+  const api = React.useMemo(() => createRigidBodyApi(getRigidBodyRef), []);
   return [ref, api];
 }; // Joints
 
@@ -773,8 +797,8 @@ const useImpulseJoint = (body1, body2, params) => {
   const {
     world
   } = useRapier();
-  const jointRef = React$1.useRef();
-  const getJointRef = React$1.useRef(() => {
+  const jointRef = React.useRef();
+  const getJointRef = React.useRef(() => {
     if (!jointRef.current) {
       let rb1;
       let rb2;
@@ -789,7 +813,7 @@ const useImpulseJoint = (body1, body2, params) => {
 
     return jointRef.current;
   });
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const joint = getJointRef.current();
     return () => {
       if (joint) {
@@ -798,7 +822,7 @@ const useImpulseJoint = (body1, body2, params) => {
       }
     };
   }, []);
-  const api = React$1.useMemo(() => createJointApi(getJointRef), []);
+  const api = React.useMemo(() => createJointApi(getJointRef), []);
   return api;
 };
 /**
@@ -812,9 +836,9 @@ const useFixedJoint = (body1, body2, [body1Anchor, body1LocalFrame, body2Anchor,
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.fixed(vectorArrayToObject(body1Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToObject(body1LocalFrame)), {}, {
+  return useImpulseJoint(body1, body2, rapier.JointData.fixed(vectorArrayToVector3(body1Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToVector3(body1LocalFrame)), {}, {
     w: 1
-  }), vectorArrayToObject(body2Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToObject(body2LocalFrame)), {}, {
+  }), vectorArrayToVector3(body2Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToVector3(body2LocalFrame)), {}, {
     w: 1
   })));
 };
@@ -829,7 +853,7 @@ const useSphericalJoint = (body1, body2, [body1Anchor, body2Anchor]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.spherical(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor)));
+  return useImpulseJoint(body1, body2, rapier.JointData.spherical(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor)));
 };
 /**
  * The revolute joint prevents any relative movement between two rigid-bodies, except for relative
@@ -841,7 +865,7 @@ const useRevoluteJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.revolute(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor), vectorArrayToObject(axis)));
+  return useImpulseJoint(body1, body2, rapier.JointData.revolute(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 /**
  * The prismatic joint prevents any relative movement between two rigid-bodies, except for relative translations along one axis.
@@ -853,21 +877,21 @@ const usePrismaticJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor), vectorArrayToObject(axis)));
+  return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 
 const _excluded$1 = ["children"];
-const RigidBodyContext = /*#__PURE__*/React$1.createContext(undefined);
-const useRigidBodyContext = () => React$1.useContext(RigidBodyContext); // RigidBody
+const RigidBodyContext = /*#__PURE__*/React.createContext(undefined);
+const useRigidBodyContext = () => React.useContext(RigidBodyContext); // RigidBody
 
-const RigidBody = /*#__PURE__*/React$1.forwardRef((_ref, ref) => {
+const RigidBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   const [object, api] = useRigidBody(props);
-  React$1.useImperativeHandle(ref, () => api);
+  React.useImperativeHandle(ref, () => api);
   return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
     value: {
       ref: object,
@@ -888,21 +912,30 @@ const MeshCollider = ({
     physicsOptions,
     world
   } = useRapier();
-  const object = React$1.useRef(null);
+  const object = React.useRef(null);
   const {
     api,
     options
   } = useRigidBodyContext();
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     let autoColliders = [];
 
     if (object.current) {
       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 () => {
@@ -911,7 +944,7 @@ const MeshCollider = ({
       });
     };
   }, []);
-  return /*#__PURE__*/React.createElement("object3D", {
+  return /*#__PURE__*/React__default["default"].createElement("object3D", {
     ref: object,
     userData: {
       r3RapierType: "MeshCollider"
@@ -974,13 +1007,13 @@ const geometryFromCollider = collider => {
   return new three.BoxBufferGeometry(1, 1, 1);
 };
 
-const DebugShape = /*#__PURE__*/React$1.memo(({
+const DebugShape = /*#__PURE__*/React.memo(({
   colliderHandle
 }) => {
   const {
     world
   } = useRapier();
-  const ref = React$1.useRef(null);
+  const ref = React.useRef(null);
   fiber.useFrame(() => {
     const collider = world.getCollider(colliderHandle);
 
@@ -1000,7 +1033,7 @@ const DebugShape = /*#__PURE__*/React$1.memo(({
       ref.current.rotation.setFromQuaternion(new three.Quaternion(rx, ry, rz, rw));
     }
   });
-  const geometry = React$1.useMemo(() => {
+  const geometry = React.useMemo(() => {
     const collider = world.getCollider(colliderHandle);
     return geometryFromCollider(collider);
   }, [colliderHandle]);
@@ -1018,8 +1051,8 @@ const Debug = () => {
   const {
     world
   } = useRapier();
-  const [colliders, setColliders] = React$1.useState([]);
-  React$1.useRef({});
+  const [colliders, setColliders] = React.useState([]);
+  React.useRef({});
 
   fiber.useFrame(() => {
     const newColliders = [];
@@ -1034,27 +1067,27 @@ const Debug = () => {
   })));
 };
 
-const InstancedRigidBodies = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     world,
     rigidBodyStates,
     physicsOptions
   } = useRapier();
-  const object = React$1.useRef(null);
-  const instancesRef = React$1.useRef();
-  const instancesRefGetter = React$1.useRef(() => {
+  const object = React.useRef(null);
+  const instancesRef = React.useRef();
+  const instancesRefGetter = React.useRef(() => {
     if (!instancesRef.current) {
       instancesRef.current = [];
     }
 
     return instancesRef.current;
   });
-  React$1.useEffect(() => {
+  React.useLayoutEffect(() => {
     const colliders = [];
     const rigidBodies = instancesRefGetter.current();
 
     if (object.current) {
-      const scale = object.current.getWorldScale(new three.Vector3());
+      const worldScale = object.current.getWorldScale(new three.Vector3());
       let hasOneMesh = false;
       object.current.traverse(mesh => {
         if (mesh instanceof three.InstancedMesh) {
@@ -1065,21 +1098,34 @@ const InstancedRigidBodies = /*#__PURE__*/React$1.forwardRef((props, ref) => {
 
           hasOneMesh = true;
           mesh.instanceMatrix.setUsage(three.DynamicDrawUsage);
-          const rigidBodyDesc = rigidBodyDescFromOptions(props);
-          const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
-          );
 
           for (let index = 0; index < mesh.count; index++) {
+            const scale = worldScale.clone();
+            const rigidBodyDesc = rigidBodyDescFromOptions(props);
+
+            if (props.scales && props.scales[index]) {
+              const s = vectorArrayToVector3(props.scales[index]);
+              scale.multiply(s);
+            }
+
             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(vectorArrayToObject(props.positions[index]), true);
+              rigidBody.setTranslation(vectorArrayToVector3(props.positions[index]), true);
             } else {
               rigidBody.setTranslation(position, true);
             } // Set rotations
@@ -1092,13 +1138,19 @@ const InstancedRigidBodies = /*#__PURE__*/React$1.forwardRef((props, ref) => {
               rigidBody.setRotation(rotation, true);
             }
 
-            const collider = world.createCollider(colliderDesc, rigidBody);
             rigidBodyStates.set(rigidBody.handle, {
               mesh: mesh,
               isSleeping: false,
               invertedMatrixWorld: object.current.matrixWorld.clone().invert(),
               setMatrix: matrix => mesh.setMatrixAt(index, matrix),
-              worldScale: object.current.getWorldScale(new three.Vector3())
+              getMatrix: () => {
+                const m = new three.Matrix4();
+                mesh.getMatrixAt(index, m);
+                return m;
+              },
+              // Setting the world scale to the scale here, because
+              // we want the scales to be reflected by instance
+              worldScale: scale
             });
             const api = createRigidBodyApi({
               current() {
@@ -1106,7 +1158,6 @@ const InstancedRigidBodies = /*#__PURE__*/React$1.forwardRef((props, ref) => {
               }
 
             });
-            colliders.push(collider);
             rigidBodies.push({
               rigidBody,
               api
@@ -1125,10 +1176,19 @@ const InstancedRigidBodies = /*#__PURE__*/React$1.forwardRef((props, ref) => {
       };
     }
   }, []);
-  React$1.useImperativeHandle(ref, () => createInstancedRigidBodiesApi(instancesRefGetter));
-  return /*#__PURE__*/React.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() {
@@ -1161,69 +1221,91 @@ const AnyCollider = _ref => {
     world
   } = useRapier();
   const rigidBodyContext = useRigidBodyContext();
-  const ref = React$1.useRef(null);
-  React$1.useEffect(() => {
-    var _rigidBodyContext$api;
-
+  const ref = React.useRef(null);
+  React.useEffect(() => {
     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.createElement("object3D", {
+  return /*#__PURE__*/React__default["default"].createElement("object3D", {
     ref: ref
   }, children);
 };
 
 const CuboidCollider = props => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({}, props, {
     shape: "cuboid"
   }));
 };
 const RoundCuboidCollider = props => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({}, props, {
     shape: "roundCuboid"
   }));
 };
 const BallCollider = props => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({}, props, {
     shape: "ball"
   }));
 };
 const CapsuleCollider = props => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({}, props, {
     shape: "capsule"
   }));
 };
 const HeightfieldCollider = props => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({}, props, {
     shape: "heightfield"
   }));
 };
 const TrimeshCollider = props => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({}, props, {
     shape: "trimesh"
   }));
 };
 const ConeCollider = props => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({}, props, {
     shape: "cone"
   }));
 };
 const CylinderCollider = props => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({}, props, {
     shape: "cylinder"
   }));
 };
 const ConvexHullCollider = props => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(AnyCollider, _extends({}, props, {
     shape: "convexHull"
   }));
 };