@react-three/rapier 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @react-three/rapier
 
+## 0.4.0
+
+### Minor Changes
+
+- dd535aa: Update to @dimforge/rapier3d-compat@0.8.1, pinned version
+
+### Patch Changes
+
+- dd535aa: Better <Physics /> lifecycle making reinitialization more stable
+
 ## 0.3.1
 
 ### Patch Changes

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

@@ -8,6 +8,8 @@ export declare const createRigidBodyApi: (ref: RefGetter<RigidBody>) => {
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 };
 export declare const createColliderApi: (ref: RefGetter<Collider>) => {
     raw: () => Collider | undefined;
@@ -18,7 +20,7 @@ export declare const createWorldApi: (ref: RefGetter<World>) => {
     getCollider: (handle: number) => Collider;
     getRigidBody: (handle: number) => RigidBody;
     createRigidBody: (desc: RigidBodyDesc) => RigidBody;
-    createCollider: (desc: ColliderDesc, rigidBodyHandle: number) => Collider;
+    createCollider: (desc: ColliderDesc, rigidBody: RigidBody) => Collider;
     removeRigidBody: (rigidBody: RigidBody) => void;
     removeCollider: (collider: Collider) => void;
     createImpulseJoint: (params: JointData, rigidBodyA: RigidBody, rigidBodyB: RigidBody) => ImpulseJoint;

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

@@ -12,6 +12,8 @@ export declare const RigidBody: React.ForwardRefExoticComponent<RigidBodyProps &
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): import("three").Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }>>;
 declare type UseColliderOptionsRequiredArgs<T> = Omit<UseColliderOptions<T>, "args"> & {
     args: T;

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

@@ -12,6 +12,8 @@ export declare const useRigidBody: <O extends Object3D<import("three").Event>>(o
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useCollider: <A>(body: RigidBodyApi, options?: UseColliderOptions<A>) => (React.MutableRefObject<Object3D<import("three").Event> | undefined> | {
     raw: () => Rapier.Collider | undefined;
@@ -24,6 +26,8 @@ export declare const useRigidBodyWithCollider: <A, O extends Object3D<import("th
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useCuboid: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<CuboidArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
     raw: () => Rapier.RigidBody | undefined;
@@ -32,6 +36,8 @@ export declare const useCuboid: <T extends Object3D<import("three").Event>>(rigi
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useBall: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<BallArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
     raw: () => Rapier.RigidBody | undefined;
@@ -40,6 +46,8 @@ export declare const useBall: <T extends Object3D<import("three").Event>>(rigidB
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useCapsule: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<CapsuleArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
     raw: () => Rapier.RigidBody | undefined;
@@ -48,6 +56,8 @@ export declare const useCapsule: <T extends Object3D<import("three").Event>>(rig
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useHeightfield: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<HeightfieldArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
     raw: () => Rapier.RigidBody | undefined;
@@ -56,6 +66,8 @@ export declare const useHeightfield: <T extends Object3D<import("three").Event>>
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 /**
  * Create a trimesh collider and rigid body.
@@ -71,6 +83,8 @@ export declare const useTrimesh: {
         applyTorqueImpulse({ x, y, z }: Vector3): void;
         translation(): Vector3;
         rotation(): Quaternion;
+        setNextKinematicRotation({ x, y, z }: Vector3): void;
+        setNextKinematicTranslation({ x, y, z }: Vector3): void;
     }];
     fromMesh<T_1 extends Object3D<import("three").Event>>(mesh: Mesh, rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<TrimeshArgs>): [ref: React.MutableRefObject<T_1>, rigidBody: {
         raw: () => Rapier.RigidBody | undefined;
@@ -79,6 +93,8 @@ export declare const useTrimesh: {
         applyTorqueImpulse({ x, y, z }: Vector3): void;
         translation(): Vector3;
         rotation(): Quaternion;
+        setNextKinematicRotation({ x, y, z }: Vector3): void;
+        setNextKinematicTranslation({ x, y, z }: Vector3): void;
     }];
 };
 export declare const usePolyline: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<PolylineArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
@@ -88,6 +104,8 @@ export declare const usePolyline: <T extends Object3D<import("three").Event>>(ri
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useRoundCuboid: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<RoundCuboidArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
     raw: () => Rapier.RigidBody | undefined;
@@ -96,6 +114,8 @@ export declare const useRoundCuboid: <T extends Object3D<import("three").Event>>
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useCylinder: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<CylinderArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
     raw: () => Rapier.RigidBody | undefined;
@@ -104,6 +124,8 @@ export declare const useCylinder: <T extends Object3D<import("three").Event>>(ri
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useRoundCylinder: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<RoundCylinderArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
     raw: () => Rapier.RigidBody | undefined;
@@ -112,6 +134,8 @@ export declare const useRoundCylinder: <T extends Object3D<import("three").Event
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useCone: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<ConeArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
     raw: () => Rapier.RigidBody | undefined;
@@ -120,6 +144,8 @@ export declare const useCone: <T extends Object3D<import("three").Event>>(rigidB
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useRoundCone: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<RoundCone>) => [ref: React.MutableRefObject<T>, rigidBody: {
     raw: () => Rapier.RigidBody | undefined;
@@ -128,6 +154,8 @@ export declare const useRoundCone: <T extends Object3D<import("three").Event>>(r
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useConvexHull: {
     <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<ConvexHullArgs>): [ref: React.MutableRefObject<T>, rigidBody: {
@@ -137,6 +165,8 @@ export declare const useConvexHull: {
         applyTorqueImpulse({ x, y, z }: Vector3): void;
         translation(): Vector3;
         rotation(): Quaternion;
+        setNextKinematicRotation({ x, y, z }: Vector3): void;
+        setNextKinematicTranslation({ x, y, z }: Vector3): void;
     }];
     fromMesh<T_1 extends Object3D<import("three").Event>>(mesh: Mesh, rigidBodyOptions?: UseBodyOptions, colliderOptions?: Omit<UseColliderOptions<ConvexHullArgs>, "colliderArgs">): [ref: React.MutableRefObject<T_1>, rigidBody: {
         raw: () => Rapier.RigidBody | undefined;
@@ -145,6 +175,8 @@ export declare const useConvexHull: {
         applyTorqueImpulse({ x, y, z }: Vector3): void;
         translation(): Vector3;
         rotation(): Quaternion;
+        setNextKinematicRotation({ x, y, z }: Vector3): void;
+        setNextKinematicTranslation({ x, y, z }: Vector3): void;
     }];
 };
 export declare const useRoundConvexHull: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<RoundConvexHullArgs>) => [ref: React.MutableRefObject<T>, rigidBody: {
@@ -154,6 +186,8 @@ export declare const useRoundConvexHull: <T extends Object3D<import("three").Eve
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useConvexMesh: {
     <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<ConvexMeshArgs>): [ref: React.MutableRefObject<Object3D<import("three").Event>>, rigidBody: {
@@ -163,6 +197,8 @@ export declare const useConvexMesh: {
         applyTorqueImpulse({ x, y, z }: Vector3): void;
         translation(): Vector3;
         rotation(): Quaternion;
+        setNextKinematicRotation({ x, y, z }: Vector3): void;
+        setNextKinematicTranslation({ x, y, z }: Vector3): void;
     }];
     fromMesh<T_1 extends Object3D<import("three").Event>>(mesh: Mesh, rigidBodyOptions?: UseBodyOptions, colliderOptions?: Omit<UseColliderOptions<ConvexMeshArgs>, "colliderArgs">): [ref: React.MutableRefObject<Object3D<import("three").Event>>, rigidBody: {
         raw: () => Rapier.RigidBody | undefined;
@@ -171,6 +207,8 @@ export declare const useConvexMesh: {
         applyTorqueImpulse({ x, y, z }: Vector3): void;
         translation(): Vector3;
         rotation(): Quaternion;
+        setNextKinematicRotation({ x, y, z }: Vector3): void;
+        setNextKinematicTranslation({ x, y, z }: Vector3): void;
     }];
 };
 export declare const useRoundConvexMesh: <T extends Object3D<import("three").Event>>(rigidBodyOptions?: UseBodyOptions, colliderOptions?: UseColliderOptions<RoundConvexMeshArgs>) => [ref: React.MutableRefObject<Object3D<import("three").Event>>, rigidBody: {
@@ -180,6 +218,8 @@ export declare const useRoundConvexMesh: <T extends Object3D<import("three").Eve
     applyTorqueImpulse({ x, y, z }: Vector3): void;
     translation(): Vector3;
     rotation(): Quaternion;
+    setNextKinematicRotation({ x, y, z }: Vector3): void;
+    setNextKinematicTranslation({ x, y, z }: Vector3): void;
 }];
 export declare const useImpulseJoint: <T extends Rapier.ImpulseJoint>(body1: MutableRefObject<RapierRigidBody | undefined | null> | RigidBodyApi, body2: MutableRefObject<RapierRigidBody | undefined | null> | RigidBodyApi, params: Rapier.JointData) => {
     raw: () => Rapier.ImpulseJoint | undefined;

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

@@ -1,6 +1,6 @@
-import { Collider } from "@dimforge/rapier3d-compat";
+import { Collider, RigidBody } from "@dimforge/rapier3d-compat";
 import { Object3D, Vector3 } from "three";
-import { RapierRigidBody, RigidBodyAutoCollider, RigidBodyShape, RigidBodyTypeString, UseColliderOptions, Vector3Array, WorldApi } from "./types";
+import { RigidBodyAutoCollider, RigidBodyShape, RigidBodyTypeString, UseColliderOptions, Vector3Array, WorldApi } from "./types";
 export declare const vectorArrayToObject: (arr: Vector3Array) => {
     x: number;
     y: number;
@@ -8,10 +8,10 @@ export declare const vectorArrayToObject: (arr: Vector3Array) => {
 };
 export declare const rigidBodyTypeFromString: (type: RigidBodyTypeString) => number;
 export declare const scaleColliderArgs: (shape: RigidBodyShape, args: (number | ArrayLike<number>)[], scale: Vector3) => (number | ArrayLike<number>)[];
-export declare const createColliderFromOptions: <A>(options: UseColliderOptions<A>, world: WorldApi, rigidBodyHandle: number, scale?: {
+export declare const createColliderFromOptions: <A>(options: UseColliderOptions<A>, world: WorldApi, rigidBody: RigidBody, scale?: {
     x: number;
     y: number;
     z: number;
 }, hasCollisionEvents?: boolean) => Collider;
-export declare const createCollidersFromChildren: (object: Object3D, rigidBody: RapierRigidBody, type: RigidBodyAutoCollider, world: WorldApi, hasCollisionEvents?: boolean) => Collider[];
+export declare const createCollidersFromChildren: (object: Object3D, rigidBody: RigidBody, type: RigidBodyAutoCollider, world: WorldApi, hasCollisionEvents?: boolean) => Collider[];
 export declare const scaleVertices: (vertices: ArrayLike<number>, scale: Vector3) => number[];

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

@@ -63,7 +63,7 @@ const scaleColliderArgs = (shape, args, scale) => {
   const scaleArray = [scale.x, scale.y, scale.z];
   return newArgs.map((arg, index) => scaleArray[index] * arg);
 };
-const createColliderFromOptions = (options, world, rigidBodyHandle, scale = {
+const createColliderFromOptions = (options, world, rigidBody, scale = {
   x: 1,
   y: 1,
   z: 1
@@ -110,7 +110,7 @@ const createColliderFromOptions = (options, world, rigidBodyHandle, scale = {
     });
   }
 
-  const collider = world.createCollider(colliderDesc, rigidBodyHandle);
+  const collider = world.createCollider(colliderDesc, rigidBody);
   return collider;
 };
 const createCollidersFromChildren = (object, rigidBody, type, world, hasCollisionEvents = false) => {
@@ -191,7 +191,7 @@ const createCollidersFromChildren = (object, rigidBody, type, world, hasCollisio
         desc.setActiveEvents(rapier3dCompat.ActiveEvents.COLLISION_EVENTS);
       }
 
-      const collider = world.createCollider(desc, rigidBody.handle);
+      const collider = world.createCollider(desc, rigidBody);
       colliders.push(collider);
     }
   });
@@ -259,6 +259,31 @@ const createRigidBodyApi = ref => {
         w
       } = ref.current().rotation();
       return new three.Quaternion(x, y, z, w);
+    },
+
+    setNextKinematicRotation({
+      x,
+      y,
+      z
+    }) {
+      ref.current().setNextKinematicRotation({
+        x,
+        y,
+        z,
+        w: 1
+      });
+    },
+
+    setNextKinematicTranslation({
+      x,
+      y,
+      z
+    }) {
+      ref.current().setNextKinematicTranslation({
+        x,
+        y,
+        z
+      });
     }
 
   };
@@ -280,10 +305,10 @@ const createWorldApi = ref => {
     getCollider: handle => ref.current().getCollider(handle),
     getRigidBody: handle => ref.current().getRigidBody(handle),
     createRigidBody: desc => ref.current().createRigidBody(desc),
-    createCollider: (desc, rigidBodyHandle) => ref.current().createCollider(desc, rigidBodyHandle),
+    createCollider: (desc, rigidBody) => ref.current().createCollider(desc, rigidBody),
     removeRigidBody: rigidBody => ref.current().removeRigidBody(rigidBody),
     removeCollider: collider => ref.current().removeCollider(collider, true),
-    createImpulseJoint: (params, rigidBodyA, rigidBodyB) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB),
+    createImpulseJoint: (params, rigidBodyA, rigidBodyB) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB, true),
     removeImpulseJoint: joint => ref.current().removeImpulseJoint(joint, true),
     forEachCollider: callback => ref.current().forEachCollider(callback)
   };
@@ -330,7 +355,7 @@ const Physics = ({
   const [rigidBodyEvents] = React.useState(() => new Map());
   const [eventQueue] = React.useState(() => new rapier3dCompat.EventQueue(false)); // Init world
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     const world = getWorldRef.current();
     return () => {
       if (world) {
@@ -399,10 +424,12 @@ const Physics = ({
     }); // Collision events
 
     eventQueue.drainCollisionEvents((handle1, handle2, started) => {
+      var _collider1$parent, _collider2$parent;
+
       const collider1 = world.getCollider(handle1);
       const collider2 = world.getCollider(handle2);
-      const rigidBodyHandle1 = collider1.parent();
-      const rigidBodyHandle2 = collider2.parent();
+      const rigidBodyHandle1 = (_collider1$parent = collider1.parent()) === null || _collider1$parent === void 0 ? void 0 : _collider1$parent.handle;
+      const rigidBodyHandle2 = (_collider2$parent = collider2.parent()) === null || _collider2$parent === void 0 ? void 0 : _collider2$parent.handle;
 
       if (!collider1 || !collider2 || !rigidBodyHandle1 || !rigidBodyHandle2) {
         return;
@@ -414,7 +441,7 @@ const Physics = ({
       const events2 = rigidBodyEvents.get(rigidBodyHandle2);
 
       if (started) {
-        world.contactPair(handle1, handle2, (manifold, flipped) => {
+        world.contactPair(collider1, collider2, (manifold, flipped) => {
           var _events1$onCollisionE, _events2$onCollisionE;
 
           events1 === null || events1 === void 0 ? void 0 : (_events1$onCollisionE = events1.onCollisionEnter) === null || _events1$onCollisionE === void 0 ? void 0 : _events1$onCollisionE.call(events1, {
@@ -529,7 +556,7 @@ const useRigidBody = (options = {}) => {
         z: avz
       }).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled);
       const rigidBody = world.createRigidBody(desc);
-      rigidBodyRef.current = rigidBody;
+      rigidBodyRef.current = world.getRigidBody(rigidBody.handle);
     }
 
     return rigidBodyRef.current;
@@ -564,6 +591,7 @@ const useRigidBody = (options = {}) => {
       y: worldPosition.y + y * scale.y,
       z: worldPosition.z + z * scale.z
     }, false);
+    console.log(rigidBody.isKinematic());
     const eulerAngles = new three.Euler(rx, ry, rz, 'XYZ');
     const rotation = new three.Quaternion().setFromEuler(eulerAngles).multiply(worldRotation);
     rigidBody.setRotation({
@@ -580,8 +608,9 @@ const useRigidBody = (options = {}) => {
     rigidBody.wakeUp();
     rigidBodyMeshes.set(rigidBody.handle, ref.current);
     return () => {
+      const actualBody = world.getRigidBody(rigidBody.handle);
+      world.removeRigidBody(actualBody);
       autoColliders.forEach(collider => world.removeCollider(collider));
-      world.removeRigidBody(rigidBody);
       rigidBodyRef.current = undefined;
       rigidBodyMeshes.delete(rigidBody.handle);
     };
@@ -610,7 +639,7 @@ const useCollider = (body, options = {}) => {
   const objectRef = React.useRef();
   const getColliderRef = React.useRef(() => {
     if (!colliderRef.current) {
-      colliderRef.current = createColliderFromOptions(options, world, body.handle);
+      colliderRef.current = createColliderFromOptions(options, world, world.getRigidBody(body.handle));
     }
 
     return colliderRef.current;
@@ -636,7 +665,7 @@ const useRigidBodyWithCollider = (rigidBodyOptions, colliderOptions) => {
     }
 
     const scale = ref.current.getWorldScale(new three.Vector3());
-    const collider = createColliderFromOptions(colliderOptions, world, rigidBody.handle, scale);
+    const collider = createColliderFromOptions(colliderOptions, world, world.getRigidBody(rigidBody.handle), scale);
     return () => {
       world.removeCollider(collider);
     };
@@ -792,7 +821,6 @@ const useImpulseJoint = (body1, body2, params) => {
     const joint = getJointRef.current();
     return () => {
       if (joint) {
-        console.log('remove joint', joint);
         world.removeImpulseJoint(joint);
         jointRef.current = undefined;
       }
@@ -943,7 +971,7 @@ const AnyCollider = _ref2 => {
   const ref = React.useRef(null);
   React.useEffect(() => {
     const scale = ref.current.getWorldScale(new three.Vector3());
-    const collider = createColliderFromOptions(props, world, rigidBody.handle, scale, hasCollisionEvents);
+    const collider = createColliderFromOptions(props, world, world.getRigidBody(rigidBody.handle), scale, hasCollisionEvents);
     return () => {
       world.removeCollider(collider);
     };
@@ -1000,20 +1028,20 @@ const ConvexHullCollider = props => {
 };
 
 const geometryFromCollider = collider => {
-  switch (collider.shapeType()) {
+  switch (collider.shape.type) {
     case rapier3dCompat.ShapeType.Cuboid:
       {
         const {
           x,
           y,
           z
-        } = collider.halfExtents();
+        } = collider.shape.halfExtents;
         return new three.BoxBufferGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
       }
 
     case rapier3dCompat.ShapeType.Ball:
       {
-        const r = collider.radius();
+        const r = collider.shape.radius;
         return new three.SphereBufferGeometry(r + +0.01, 8, 8);
       }
 
@@ -1021,10 +1049,12 @@ const geometryFromCollider = collider => {
       {
         var _g$index;
 
-        const v = collider.vertices();
-        const i = collider.indices();
-        const g = new three.BufferGeometry();
-        g.setAttribute("position", new three.BufferAttribute(v, 3));
+        const v = collider.shape.vertices;
+        const i = collider.shape.indices;
+        const g = new three.BufferGeometry(); // Vertices are not always a float3darray (???), so we need to convert them
+
+        const safeVerts = Float32Array.from(v);
+        g.setAttribute("position", new three.BufferAttribute(safeVerts, 3));
         (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.set(i);
         g.setDrawRange(0, g.attributes.position.array.length / 3 - 1);
         return g;
@@ -1032,16 +1062,18 @@ const geometryFromCollider = collider => {
 
     case rapier3dCompat.ShapeType.ConvexPolyhedron:
       {
-        const cv = collider.vertices();
+        const cv = collider.shape.vertices; // Vertices are not always a float3darray (???), so we need to convert them
+
+        const safeVerts = Float32Array.from(cv);
         const cg = new three.BufferGeometry();
-        cg.setAttribute("position", new three.BufferAttribute(cv, 3));
+        cg.setAttribute("position", new three.BufferAttribute(safeVerts, 3));
         return cg;
       }
 
     case rapier3dCompat.ShapeType.Cylinder:
       {
-        const r = collider.radius();
-        const h = collider.halfHeight();
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
         const g = new three.CylinderBufferGeometry(r, r, h);
         return g;
       }

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

@@ -63,7 +63,7 @@ const scaleColliderArgs = (shape, args, scale) => {
   const scaleArray = [scale.x, scale.y, scale.z];
   return newArgs.map((arg, index) => scaleArray[index] * arg);
 };
-const createColliderFromOptions = (options, world, rigidBodyHandle, scale = {
+const createColliderFromOptions = (options, world, rigidBody, scale = {
   x: 1,
   y: 1,
   z: 1
@@ -110,7 +110,7 @@ const createColliderFromOptions = (options, world, rigidBodyHandle, scale = {
     });
   }
 
-  const collider = world.createCollider(colliderDesc, rigidBodyHandle);
+  const collider = world.createCollider(colliderDesc, rigidBody);
   return collider;
 };
 const createCollidersFromChildren = (object, rigidBody, type, world, hasCollisionEvents = false) => {
@@ -191,7 +191,7 @@ const createCollidersFromChildren = (object, rigidBody, type, world, hasCollisio
         desc.setActiveEvents(rapier3dCompat.ActiveEvents.COLLISION_EVENTS);
       }
 
-      const collider = world.createCollider(desc, rigidBody.handle);
+      const collider = world.createCollider(desc, rigidBody);
       colliders.push(collider);
     }
   });
@@ -259,6 +259,31 @@ const createRigidBodyApi = ref => {
         w
       } = ref.current().rotation();
       return new three.Quaternion(x, y, z, w);
+    },
+
+    setNextKinematicRotation({
+      x,
+      y,
+      z
+    }) {
+      ref.current().setNextKinematicRotation({
+        x,
+        y,
+        z,
+        w: 1
+      });
+    },
+
+    setNextKinematicTranslation({
+      x,
+      y,
+      z
+    }) {
+      ref.current().setNextKinematicTranslation({
+        x,
+        y,
+        z
+      });
     }
 
   };
@@ -280,10 +305,10 @@ const createWorldApi = ref => {
     getCollider: handle => ref.current().getCollider(handle),
     getRigidBody: handle => ref.current().getRigidBody(handle),
     createRigidBody: desc => ref.current().createRigidBody(desc),
-    createCollider: (desc, rigidBodyHandle) => ref.current().createCollider(desc, rigidBodyHandle),
+    createCollider: (desc, rigidBody) => ref.current().createCollider(desc, rigidBody),
     removeRigidBody: rigidBody => ref.current().removeRigidBody(rigidBody),
     removeCollider: collider => ref.current().removeCollider(collider, true),
-    createImpulseJoint: (params, rigidBodyA, rigidBodyB) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB),
+    createImpulseJoint: (params, rigidBodyA, rigidBodyB) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB, true),
     removeImpulseJoint: joint => ref.current().removeImpulseJoint(joint, true),
     forEachCollider: callback => ref.current().forEachCollider(callback)
   };
@@ -330,7 +355,7 @@ const Physics = ({
   const [rigidBodyEvents] = React.useState(() => new Map());
   const [eventQueue] = React.useState(() => new rapier3dCompat.EventQueue(false)); // Init world
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     const world = getWorldRef.current();
     return () => {
       if (world) {
@@ -399,10 +424,12 @@ const Physics = ({
     }); // Collision events
 
     eventQueue.drainCollisionEvents((handle1, handle2, started) => {
+      var _collider1$parent, _collider2$parent;
+
       const collider1 = world.getCollider(handle1);
       const collider2 = world.getCollider(handle2);
-      const rigidBodyHandle1 = collider1.parent();
-      const rigidBodyHandle2 = collider2.parent();
+      const rigidBodyHandle1 = (_collider1$parent = collider1.parent()) === null || _collider1$parent === void 0 ? void 0 : _collider1$parent.handle;
+      const rigidBodyHandle2 = (_collider2$parent = collider2.parent()) === null || _collider2$parent === void 0 ? void 0 : _collider2$parent.handle;
 
       if (!collider1 || !collider2 || !rigidBodyHandle1 || !rigidBodyHandle2) {
         return;
@@ -414,7 +441,7 @@ const Physics = ({
       const events2 = rigidBodyEvents.get(rigidBodyHandle2);
 
       if (started) {
-        world.contactPair(handle1, handle2, (manifold, flipped) => {
+        world.contactPair(collider1, collider2, (manifold, flipped) => {
           var _events1$onCollisionE, _events2$onCollisionE;
 
           events1 === null || events1 === void 0 ? void 0 : (_events1$onCollisionE = events1.onCollisionEnter) === null || _events1$onCollisionE === void 0 ? void 0 : _events1$onCollisionE.call(events1, {
@@ -529,7 +556,7 @@ const useRigidBody = (options = {}) => {
         z: avz
       }).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled);
       const rigidBody = world.createRigidBody(desc);
-      rigidBodyRef.current = rigidBody;
+      rigidBodyRef.current = world.getRigidBody(rigidBody.handle);
     }
 
     return rigidBodyRef.current;
@@ -564,6 +591,7 @@ const useRigidBody = (options = {}) => {
       y: worldPosition.y + y * scale.y,
       z: worldPosition.z + z * scale.z
     }, false);
+    console.log(rigidBody.isKinematic());
     const eulerAngles = new three.Euler(rx, ry, rz, 'XYZ');
     const rotation = new three.Quaternion().setFromEuler(eulerAngles).multiply(worldRotation);
     rigidBody.setRotation({
@@ -580,8 +608,9 @@ const useRigidBody = (options = {}) => {
     rigidBody.wakeUp();
     rigidBodyMeshes.set(rigidBody.handle, ref.current);
     return () => {
+      const actualBody = world.getRigidBody(rigidBody.handle);
+      world.removeRigidBody(actualBody);
       autoColliders.forEach(collider => world.removeCollider(collider));
-      world.removeRigidBody(rigidBody);
       rigidBodyRef.current = undefined;
       rigidBodyMeshes.delete(rigidBody.handle);
     };
@@ -610,7 +639,7 @@ const useCollider = (body, options = {}) => {
   const objectRef = React.useRef();
   const getColliderRef = React.useRef(() => {
     if (!colliderRef.current) {
-      colliderRef.current = createColliderFromOptions(options, world, body.handle);
+      colliderRef.current = createColliderFromOptions(options, world, world.getRigidBody(body.handle));
     }
 
     return colliderRef.current;
@@ -636,7 +665,7 @@ const useRigidBodyWithCollider = (rigidBodyOptions, colliderOptions) => {
     }
 
     const scale = ref.current.getWorldScale(new three.Vector3());
-    const collider = createColliderFromOptions(colliderOptions, world, rigidBody.handle, scale);
+    const collider = createColliderFromOptions(colliderOptions, world, world.getRigidBody(rigidBody.handle), scale);
     return () => {
       world.removeCollider(collider);
     };
@@ -792,7 +821,6 @@ const useImpulseJoint = (body1, body2, params) => {
     const joint = getJointRef.current();
     return () => {
       if (joint) {
-        console.log('remove joint', joint);
         world.removeImpulseJoint(joint);
         jointRef.current = undefined;
       }
@@ -943,7 +971,7 @@ const AnyCollider = _ref2 => {
   const ref = React.useRef(null);
   React.useEffect(() => {
     const scale = ref.current.getWorldScale(new three.Vector3());
-    const collider = createColliderFromOptions(props, world, rigidBody.handle, scale, hasCollisionEvents);
+    const collider = createColliderFromOptions(props, world, world.getRigidBody(rigidBody.handle), scale, hasCollisionEvents);
     return () => {
       world.removeCollider(collider);
     };
@@ -1000,20 +1028,20 @@ const ConvexHullCollider = props => {
 };
 
 const geometryFromCollider = collider => {
-  switch (collider.shapeType()) {
+  switch (collider.shape.type) {
     case rapier3dCompat.ShapeType.Cuboid:
       {
         const {
           x,
           y,
           z
-        } = collider.halfExtents();
+        } = collider.shape.halfExtents;
         return new three.BoxBufferGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
       }
 
     case rapier3dCompat.ShapeType.Ball:
       {
-        const r = collider.radius();
+        const r = collider.shape.radius;
         return new three.SphereBufferGeometry(r + +0.01, 8, 8);
       }
 
@@ -1021,10 +1049,12 @@ const geometryFromCollider = collider => {
       {
         var _g$index;
 
-        const v = collider.vertices();
-        const i = collider.indices();
-        const g = new three.BufferGeometry();
-        g.setAttribute("position", new three.BufferAttribute(v, 3));
+        const v = collider.shape.vertices;
+        const i = collider.shape.indices;
+        const g = new three.BufferGeometry(); // Vertices are not always a float3darray (???), so we need to convert them
+
+        const safeVerts = Float32Array.from(v);
+        g.setAttribute("position", new three.BufferAttribute(safeVerts, 3));
         (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.set(i);
         g.setDrawRange(0, g.attributes.position.array.length / 3 - 1);
         return g;
@@ -1032,16 +1062,18 @@ const geometryFromCollider = collider => {
 
     case rapier3dCompat.ShapeType.ConvexPolyhedron:
       {
-        const cv = collider.vertices();
+        const cv = collider.shape.vertices; // Vertices are not always a float3darray (???), so we need to convert them
+
+        const safeVerts = Float32Array.from(cv);
         const cg = new three.BufferGeometry();
-        cg.setAttribute("position", new three.BufferAttribute(cv, 3));
+        cg.setAttribute("position", new three.BufferAttribute(safeVerts, 3));
         return cg;
       }
 
     case rapier3dCompat.ShapeType.Cylinder:
       {
-        const r = collider.radius();
-        const h = collider.halfHeight();
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
         const g = new three.CylinderBufferGeometry(r, r, h);
         return g;
       }

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useLayoutEffect, useMemo, createContext, useContext, useEffect, forwardRef, useImperativeHandle, memo } from 'react';
+import React, { useRef, useState, useEffect, useMemo, createContext, useContext, forwardRef, useImperativeHandle, memo } from 'react';
 import { useAsset } from 'use-asset';
 import { useFrame } from '@react-three/fiber';
 import { ColliderDesc, CoefficientCombineRule, ActiveEvents, EventQueue, ShapeType } from '@dimforge/rapier3d-compat';
@@ -38,7 +38,7 @@ const scaleColliderArgs = (shape, args, scale) => {
   const scaleArray = [scale.x, scale.y, scale.z];
   return newArgs.map((arg, index) => scaleArray[index] * arg);
 };
-const createColliderFromOptions = (options, world, rigidBodyHandle, scale = {
+const createColliderFromOptions = (options, world, rigidBody, scale = {
   x: 1,
   y: 1,
   z: 1
@@ -85,7 +85,7 @@ const createColliderFromOptions = (options, world, rigidBodyHandle, scale = {
     });
   }
 
-  const collider = world.createCollider(colliderDesc, rigidBodyHandle);
+  const collider = world.createCollider(colliderDesc, rigidBody);
   return collider;
 };
 const createCollidersFromChildren = (object, rigidBody, type, world, hasCollisionEvents = false) => {
@@ -166,7 +166,7 @@ const createCollidersFromChildren = (object, rigidBody, type, world, hasCollisio
         desc.setActiveEvents(ActiveEvents.COLLISION_EVENTS);
       }
 
-      const collider = world.createCollider(desc, rigidBody.handle);
+      const collider = world.createCollider(desc, rigidBody);
       colliders.push(collider);
     }
   });
@@ -234,6 +234,31 @@ const createRigidBodyApi = ref => {
         w
       } = ref.current().rotation();
       return new Quaternion(x, y, z, w);
+    },
+
+    setNextKinematicRotation({
+      x,
+      y,
+      z
+    }) {
+      ref.current().setNextKinematicRotation({
+        x,
+        y,
+        z,
+        w: 1
+      });
+    },
+
+    setNextKinematicTranslation({
+      x,
+      y,
+      z
+    }) {
+      ref.current().setNextKinematicTranslation({
+        x,
+        y,
+        z
+      });
     }
 
   };
@@ -255,10 +280,10 @@ const createWorldApi = ref => {
     getCollider: handle => ref.current().getCollider(handle),
     getRigidBody: handle => ref.current().getRigidBody(handle),
     createRigidBody: desc => ref.current().createRigidBody(desc),
-    createCollider: (desc, rigidBodyHandle) => ref.current().createCollider(desc, rigidBodyHandle),
+    createCollider: (desc, rigidBody) => ref.current().createCollider(desc, rigidBody),
     removeRigidBody: rigidBody => ref.current().removeRigidBody(rigidBody),
     removeCollider: collider => ref.current().removeCollider(collider, true),
-    createImpulseJoint: (params, rigidBodyA, rigidBodyB) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB),
+    createImpulseJoint: (params, rigidBodyA, rigidBodyB) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB, true),
     removeImpulseJoint: joint => ref.current().removeImpulseJoint(joint, true),
     forEachCollider: callback => ref.current().forEachCollider(callback)
   };
@@ -305,7 +330,7 @@ const Physics = ({
   const [rigidBodyEvents] = useState(() => new Map());
   const [eventQueue] = useState(() => new EventQueue(false)); // Init world
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const world = getWorldRef.current();
     return () => {
       if (world) {
@@ -374,10 +399,12 @@ const Physics = ({
     }); // Collision events
 
     eventQueue.drainCollisionEvents((handle1, handle2, started) => {
+      var _collider1$parent, _collider2$parent;
+
       const collider1 = world.getCollider(handle1);
       const collider2 = world.getCollider(handle2);
-      const rigidBodyHandle1 = collider1.parent();
-      const rigidBodyHandle2 = collider2.parent();
+      const rigidBodyHandle1 = (_collider1$parent = collider1.parent()) === null || _collider1$parent === void 0 ? void 0 : _collider1$parent.handle;
+      const rigidBodyHandle2 = (_collider2$parent = collider2.parent()) === null || _collider2$parent === void 0 ? void 0 : _collider2$parent.handle;
 
       if (!collider1 || !collider2 || !rigidBodyHandle1 || !rigidBodyHandle2) {
         return;
@@ -389,7 +416,7 @@ const Physics = ({
       const events2 = rigidBodyEvents.get(rigidBodyHandle2);
 
       if (started) {
-        world.contactPair(handle1, handle2, (manifold, flipped) => {
+        world.contactPair(collider1, collider2, (manifold, flipped) => {
           var _events1$onCollisionE, _events2$onCollisionE;
 
           events1 === null || events1 === void 0 ? void 0 : (_events1$onCollisionE = events1.onCollisionEnter) === null || _events1$onCollisionE === void 0 ? void 0 : _events1$onCollisionE.call(events1, {
@@ -504,7 +531,7 @@ const useRigidBody = (options = {}) => {
         z: avz
       }).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled);
       const rigidBody = world.createRigidBody(desc);
-      rigidBodyRef.current = rigidBody;
+      rigidBodyRef.current = world.getRigidBody(rigidBody.handle);
     }
 
     return rigidBodyRef.current;
@@ -539,6 +566,7 @@ const useRigidBody = (options = {}) => {
       y: worldPosition.y + y * scale.y,
       z: worldPosition.z + z * scale.z
     }, false);
+    console.log(rigidBody.isKinematic());
     const eulerAngles = new Euler(rx, ry, rz, 'XYZ');
     const rotation = new Quaternion().setFromEuler(eulerAngles).multiply(worldRotation);
     rigidBody.setRotation({
@@ -555,8 +583,9 @@ const useRigidBody = (options = {}) => {
     rigidBody.wakeUp();
     rigidBodyMeshes.set(rigidBody.handle, ref.current);
     return () => {
+      const actualBody = world.getRigidBody(rigidBody.handle);
+      world.removeRigidBody(actualBody);
       autoColliders.forEach(collider => world.removeCollider(collider));
-      world.removeRigidBody(rigidBody);
       rigidBodyRef.current = undefined;
       rigidBodyMeshes.delete(rigidBody.handle);
     };
@@ -585,7 +614,7 @@ const useCollider = (body, options = {}) => {
   const objectRef = useRef();
   const getColliderRef = useRef(() => {
     if (!colliderRef.current) {
-      colliderRef.current = createColliderFromOptions(options, world, body.handle);
+      colliderRef.current = createColliderFromOptions(options, world, world.getRigidBody(body.handle));
     }
 
     return colliderRef.current;
@@ -611,7 +640,7 @@ const useRigidBodyWithCollider = (rigidBodyOptions, colliderOptions) => {
     }
 
     const scale = ref.current.getWorldScale(new Vector3());
-    const collider = createColliderFromOptions(colliderOptions, world, rigidBody.handle, scale);
+    const collider = createColliderFromOptions(colliderOptions, world, world.getRigidBody(rigidBody.handle), scale);
     return () => {
       world.removeCollider(collider);
     };
@@ -767,7 +796,6 @@ const useImpulseJoint = (body1, body2, params) => {
     const joint = getJointRef.current();
     return () => {
       if (joint) {
-        console.log('remove joint', joint);
         world.removeImpulseJoint(joint);
         jointRef.current = undefined;
       }
@@ -918,7 +946,7 @@ const AnyCollider = _ref2 => {
   const ref = useRef(null);
   useEffect(() => {
     const scale = ref.current.getWorldScale(new Vector3());
-    const collider = createColliderFromOptions(props, world, rigidBody.handle, scale, hasCollisionEvents);
+    const collider = createColliderFromOptions(props, world, world.getRigidBody(rigidBody.handle), scale, hasCollisionEvents);
     return () => {
       world.removeCollider(collider);
     };
@@ -975,20 +1003,20 @@ const ConvexHullCollider = props => {
 };
 
 const geometryFromCollider = collider => {
-  switch (collider.shapeType()) {
+  switch (collider.shape.type) {
     case ShapeType.Cuboid:
       {
         const {
           x,
           y,
           z
-        } = collider.halfExtents();
+        } = collider.shape.halfExtents;
         return new BoxBufferGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
       }
 
     case ShapeType.Ball:
       {
-        const r = collider.radius();
+        const r = collider.shape.radius;
         return new SphereBufferGeometry(r + +0.01, 8, 8);
       }
 
@@ -996,10 +1024,12 @@ const geometryFromCollider = collider => {
       {
         var _g$index;
 
-        const v = collider.vertices();
-        const i = collider.indices();
-        const g = new BufferGeometry();
-        g.setAttribute("position", new BufferAttribute(v, 3));
+        const v = collider.shape.vertices;
+        const i = collider.shape.indices;
+        const g = new BufferGeometry(); // Vertices are not always a float3darray (???), so we need to convert them
+
+        const safeVerts = Float32Array.from(v);
+        g.setAttribute("position", new BufferAttribute(safeVerts, 3));
         (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.set(i);
         g.setDrawRange(0, g.attributes.position.array.length / 3 - 1);
         return g;
@@ -1007,16 +1037,18 @@ const geometryFromCollider = collider => {
 
     case ShapeType.ConvexPolyhedron:
       {
-        const cv = collider.vertices();
+        const cv = collider.shape.vertices; // Vertices are not always a float3darray (???), so we need to convert them
+
+        const safeVerts = Float32Array.from(cv);
         const cg = new BufferGeometry();
-        cg.setAttribute("position", new BufferAttribute(cv, 3));
+        cg.setAttribute("position", new BufferAttribute(safeVerts, 3));
         return cg;
       }
 
     case ShapeType.Cylinder:
       {
-        const r = collider.radius();
-        const h = collider.halfHeight();
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
         const g = new CylinderBufferGeometry(r, r, h);
         return g;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",
@@ -23,7 +23,7 @@
     "three": "^0.139.2"
   },
   "dependencies": {
-    "@dimforge/rapier3d-compat": "0.8.0-alpha.2",
+    "@dimforge/rapier3d-compat": "0.8.1",
     "use-asset": "^1.0.4"
   },
   "repository": "https://github.com/pmndrs/react-three-rapier/tree/master/packages/react-three-rapier"

package/readme.md

@@ -0,0 +1,176 @@
+<h1 align="center">@react-three/rapier 🗡</h1>
+
+<p align="center">⚠️ Under heavy development. All APIs are subject to change. ⚠️</p>
+
+## Usage
+
+```tsx
+import { Box } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import { Physics, RigidBody } from "@react-three/rapier";
+
+const App = () => {
+  return (
+    <Canvas>
+      <Physics>
+        <RigidBody>
+          <Box />
+        </RigidBody>
+      </Physics>
+    </Canvas>
+  );
+};
+```
+
+## Automatic colliders
+
+RigidBodies generate automatic colliders by default for all meshes that it contains. You can control the default collider by setting the `colliders` prop on a `<RigidBody />`, or change it globally by setting `colliders` on `<Physics />`. Setting `colliders={false}` disables auto-generation.
+
+Supported values:
+
+- `"cuboid"`, creates a CuboidCollider based on the bounding box of the mesh
+- `"ball"`, creates a SphereCollider based on the bounding sphere of the mesh
+- `"trimesh"`, creates a TrimeshCollider based on the mesh's geometry -- note trimeshes are massless by default (https://rapier.rs/docs/user_guides/javascript/common_mistakes#rigid-body-isnt-affected-by-gravity)
+- `"hull"`, creates a ConvexHullCollider based on the mesh's geometry
+- `false`, disables auto-generation
+
+Generate ConvexHull colliders for all meshes in a RigidBody by default:
+
+```tsx
+const Scene = () => (
+  <Physics colliders="hull">
+    <RigidBody>
+      <Box />
+    </RigidBody>
+    <RigidBody position={[0, 10, 0]}>
+      <Sphere />
+    </RigidBody>
+  </Physics>
+);
+```
+
+Turn off automatic collider generation globally, but apply auto generation locally:
+
+```tsx
+const Scene = () => (
+  <Physics colliders={false}>
+    <RigidBody colliders="cuboid">
+      <Box />
+    </RigidBody>
+
+    <RigidBody position={[0, 10, 0]} colliders="ball">
+      <Sphere />
+    </RigidBody>
+
+    <RigidBody position={[0, 10, 0]}>
+      <Sphere />
+      <BallCollider args={0.5} />
+      <BallCollider args={0.5} position={[1, 0, 0]} />
+    </RigidBody>
+  </Physics>
+);
+```
+
+Objects work inside other transformed objects as well. Simulation runs in world space and is transformed to the objects local space, so that things act as you'd expect.
+
+```tsx
+import { Box } from "@react-three/drei";
+import { RigidBody, CuboidCollider } from "@react-three/rapier";
+
+const Scene = () => {
+  return (
+    <group position={[2, 5, 0]} rotation={[0, 0.3, 2]}>
+      <RigidBody>
+        <Box />
+        <CuboidCollider args={[0.5, 0.5, 0.5]} />
+      </RigidBody>
+    </group>
+  );
+};
+```
+
+## Debug
+
+Use the Debug component to see live representations of all colliders in a scene.
+
+> Note: Experimental. Not all shapes are supported. Unsupported shapes are always represented by cubes.
+
+```tsx
+import { Box, Sphere } from "@react-three/drei";
+import { RigidBody, Debug } from "@react-three/rapier";
+
+const Scene = () => {
+  return (
+    <Physics>
+      <Debug />
+
+      <RigidBody>
+        <Box />
+      </RigidBody>
+      <RigidBody>
+        <Sphere />
+      </RigidBody>
+    </Physics>
+  );
+};
+```
+
+## Events
+
+You can subscribe collision and state events on the RigidBody.
+
+```tsx
+const RigidBottle = () => {
+  const [isAsleep, setIsAsleep] = useState(false);
+
+return (
+    <RigidBody
+      colliders="hull"
+      onSleep={() => setIsAsleep(true)}
+      onWake={() => setIsAsleep(false)}
+      onCollision={({manifold}) => {
+        console.log('Collision at world position ', manifold.solverContactPoint(0))
+      }}
+    >
+      <Sphere>
+        <meshPhysicalMaterial color={isAsleep ? 'white' : 'blue'}>
+      </Sphere>
+    </RigidBody>
+  )
+}
+```
+
+## Hooks
+
+You can also use hooks to generate rigid bodies and colliders, but it's not encouraged.
+
+```tsx
+import { Box } from "@react-three/drei";
+import { useCuboid } from "@react-three/rapier";
+
+const RigidBox = () => {
+  // Generates a RigidBody and attaches a BoxCollider to it, returns a ref
+  const [box, rigidBody, collider] = useCuboid(
+    { position: [1, 1, 1] },
+    { args: [0.5, 0.5, 0.5] }
+  );
+
+  return <Box ref={box} />;
+};
+```
+
+## Roadmap?
+
+In order, but also not necessarily:
+
+- [x] Draft of all base shapes
+- [x] Draft of all base joints
+- [x] Nested objects retain world transforms
+- [x] Nested objects retain correct collider scale
+- [x] Automatic colliders based on rigidbody children
+- [ ] Translation and rotational constraints
+- [x] Collision events
+- [ ] InstancedMesh support
+- [ ] Docs
+- [ ] CodeSandbox examples
+- [ ] Helpers, for things like Vehicle, Rope, Player, etc