@react-three/rapier 0.6.5 → 0.6.8

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

@@ -1,2 +1,13 @@
-/// <reference types="react" />
-export declare const Debug: () => JSX.Element;
+import { FC } from "react";
+interface DebugProps {
+    /**
+     * The color of the wireframe representing an active collider that is affected by forces and not sleeping.
+     */
+    color?: string;
+    /**
+     * The color of the wireframe representing a static (fixed or kinematic) or sleeping collider.
+     */
+    sleepColor?: string;
+}
+export declare const Debug: FC<DebugProps>;
+export {};

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

@@ -7,4 +7,4 @@ export interface InstancedRigidBodiesProps extends Omit<RigidBodyProps, "positio
     rotations?: Vector3Array[];
     scales?: Vector3Array[];
 }
-export declare const InstancedRigidBodies: React.ForwardRefExoticComponent<InstancedRigidBodiesProps & React.RefAttributes<InstancedRigidBodyApi>>;
+export declare const InstancedRigidBodies: React.ForwardRefExoticComponent<Pick<InstancedRigidBodiesProps, "type" | "canSleep" | "linearDamping" | "angularDamping" | "linearVelocity" | "angularVelocity" | "gravityScale" | "ccd" | "colliders" | "friction" | "restitution" | "onSleep" | "onWake" | "lockRotations" | "lockTranslations" | "enabledRotations" | "enabledTranslations" | "children" | "quaternion" | "attach" | "args" | "key" | "onUpdate" | "up" | "scale" | "matrix" | "layers" | "dispose" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMissed" | "onPointerCancel" | "onWheel" | "positions" | "rotations" | "scales"> & React.RefAttributes<InstancedRigidBodyApi>>;

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

@@ -6,7 +6,6 @@ import { Matrix4, Object3D, Vector3 } from "three";
 export interface RapierContext {
     rapier: typeof Rapier;
     world: WorldApi;
-    colliderMeshes: Map<ColliderHandle, Object3D>;
     rigidBodyStates: Map<RigidBodyHandle, {
         mesh: Object3D;
         isSleeping: boolean;

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

@@ -1,6 +1,7 @@
 import React, { MutableRefObject, RefObject } from "react";
 import { ReactNode } from "react";
 import { Object3D } from "three";
+import { Object3DProps } from "@react-three/fiber";
 import { InstancedRigidBodyApi } from "./api";
 import { InstancedRigidBodiesProps } from "./InstancedRigidBodies";
 import { RigidBodyApi, UseRigidBodyOptions } from "./types";
@@ -16,7 +17,7 @@ export declare const useRigidBodyContext: () => {
     hasCollisionEvents: boolean;
     options: UseRigidBodyOptions | InstancedRigidBodiesProps;
 };
-export interface RigidBodyProps extends UseRigidBodyOptions {
+export interface RigidBodyProps extends UseRigidBodyOptions, Omit<Object3DProps, 'type' | 'position' | 'rotation'> {
     children?: ReactNode;
 }
-export declare const RigidBody: React.ForwardRefExoticComponent<RigidBodyProps & React.RefAttributes<import("./api").RigidBodyApi>>;
+export declare const RigidBody: React.ForwardRefExoticComponent<Pick<RigidBodyProps, "type" | "canSleep" | "linearDamping" | "angularDamping" | "linearVelocity" | "angularVelocity" | "gravityScale" | "ccd" | "position" | "rotation" | "colliders" | "friction" | "restitution" | "onCollisionEnter" | "onCollisionExit" | "onSleep" | "onWake" | "lockRotations" | "lockTranslations" | "enabledRotations" | "enabledTranslations" | "children" | "quaternion" | "attach" | "args" | "key" | "onUpdate" | "up" | "scale" | "matrix" | "layers" | "dispose" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMissed" | "onPointerCancel" | "onWheel"> & React.RefAttributes<import("./api").RigidBodyApi>>;

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

@@ -58,7 +58,7 @@ export interface RigidBodyApi {
     /**
      * Sets the rotation quaternion of this rigid-body.
      */
-    setRotation(rotation: Vector3Object): void;
+    setRotation(rotation: Quaternion): void;
     /**
      * The linear velocity of this rigid-body.
      */
@@ -99,7 +99,7 @@ export interface RigidBodyApi {
      * rigid-body from its current position and its next kinematic position. This velocity will be used
      * to compute forces on dynamic bodies interacting with this body.
      */
-    setNextKinematicRotation(rotation: Vector3Object): void;
+    setNextKinematicRotation(rotation: Quaternion): void;
     /**
      * If this rigid body is kinematic, sets its future rotation after the next timestep integration.
      *

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

@@ -21,7 +21,11 @@ export declare type HeightfieldArgs = [
     width: number,
     height: number,
     heights: number[],
-    scale: number
+    scale: {
+        x: number;
+        y: number;
+        z: number;
+    }
 ];
 export declare type TrimeshArgs = [
     vertices: ArrayLike<number>,

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

@@ -11,7 +11,15 @@ export declare const decomposeMatrix4: (m: Matrix4) => {
     rotation: Quaternion;
     scale: Vector3;
 };
-export declare const scaleColliderArgs: (shape: RigidBodyShape, args: (number | ArrayLike<number>)[], scale: Vector3) => (number | ArrayLike<number>)[];
+export declare const scaleColliderArgs: (shape: RigidBodyShape, args: (number | ArrayLike<number> | {
+    x: number;
+    y: number;
+    z: number;
+})[], scale: Vector3) => (number | ArrayLike<number> | {
+    x: number;
+    y: number;
+    z: number;
+})[];
 interface CreateColliderFromOptions {
     <ColliderArgs>(options: {
         options: UseColliderOptions<ColliderArgs>;

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

@@ -7,6 +7,8 @@ var React = require('react');
 var useAsset = require('use-asset');
 var fiber = require('@react-three/fiber');
 var three = require('three');
+var BufferGeometryUtils = require('three/examples/jsm/utils/BufferGeometryUtils');
+var threeStdlib = require('three-stdlib');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -73,11 +75,13 @@ const decomposeMatrix4 = m => {
   };
 };
 const scaleColliderArgs = (shape, args, scale) => {
-  // Heightfield only scales the last arg
-  const newArgs = args.slice();
+  const newArgs = args.slice(); // Heightfield uses a vector
 
   if (shape === "heightfield") {
-    newArgs[3] *= scale.x;
+    const s = newArgs[3];
+    s.x *= scale.x;
+    s.x *= scale.y;
+    s.x *= scale.z;
     return newArgs;
   } // Trimesh and convex scale the vertices
 
@@ -85,9 +89,10 @@ const scaleColliderArgs = (shape, args, scale) => {
   if (shape === "trimesh" || shape === "convexHull") {
     newArgs[0] = scaleVertices(newArgs[0], scale);
     return newArgs;
-  }
+  } // Prepfill with some extra
+
 
-  const scaleArray = [scale.x, scale.y, scale.z];
+  const scaleArray = [scale.x, scale.y, scale.z, scale.x, scale.x];
   return newArgs.map((arg, index) => scaleArray[index] * arg);
 };
 const createColliderFromOptions = ({
@@ -163,7 +168,6 @@ const createCollidersFromChildren = ({
 }) => {
   const hasCollisionEvents = !!(options.onCollisionEnter || options.onCollisionExit);
   const colliders = [];
-  new three.Vector3();
   object.traverseVisible(child => {
     if ("isMesh" in child) {
       if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
@@ -244,15 +248,15 @@ const colliderDescFromGeometry = (geometry, colliders, scale, hasCollisionEvents
       {
         var _g$index;
 
-        const _g = geometry.clone().scale(scale.x, scale.y, scale.z);
-
-        desc = rapier3dCompat.ColliderDesc.trimesh(_g.attributes.position.array, (_g$index = _g.index) === null || _g$index === void 0 ? void 0 : _g$index.array);
+        const clonedGeometry = geometry.index ? geometry.clone() : BufferGeometryUtils.mergeVertices(geometry);
+        const g = clonedGeometry.scale(scale.x, scale.y, scale.z);
+        desc = rapier3dCompat.ColliderDesc.trimesh(g.attributes.position.array, (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.array);
       }
       break;
 
     case "hull":
-      const g = geometry.clone().scale(scale.x, scale.y, scale.z);
       {
+        const g = geometry.clone().scale(scale.x, scale.y, scale.z);
         desc = rapier3dCompat.ColliderDesc.convexHull(g.attributes.position.array);
       }
       break;
@@ -319,12 +323,7 @@ const createRigidBodyApi = ref => {
     addTorque: torque => ref.current().addTorque(torque, true),
 
     translation() {
-      const {
-        x,
-        y,
-        z
-      } = ref.current().translation();
-      return new three.Vector3(x, y, z);
+      return rapierVector3ToVector3(ref.current().translation());
     },
 
     setTranslation: translation => ref.current().setTranslation(translation, true),
@@ -339,18 +338,8 @@ const createRigidBodyApi = ref => {
       return new three.Quaternion(x, y, z, w);
     },
 
-    setRotation: ({
-      x,
-      y,
-      z
-    }) => {
-      const q = vector3ToQuaternion(new three.Vector3(x, y, z));
-      ref.current().setRotation({
-        x: q.x,
-        y: q.y,
-        z: q.z,
-        w: q.w
-      }, true);
+    setRotation: rotation => {
+      ref.current().setRotation(rotation, true);
     },
 
     linvel() {
@@ -386,18 +375,8 @@ const createRigidBodyApi = ref => {
     },
 
     setAngularDamping: factor => ref.current().setAngularDamping(factor),
-    setNextKinematicRotation: ({
-      x,
-      y,
-      z
-    }) => {
-      const q = vector3ToQuaternion(new three.Vector3(x, y, z));
-      ref.current().setNextKinematicRotation({
-        x: q.x,
-        y: q.y,
-        z: q.z,
-        w: q.w
-      });
+    setNextKinematicRotation: rotation => {
+      ref.current().setNextKinematicRotation(rotation);
     },
     setNextKinematicTranslation: translation => ref.current().setNextKinematicTranslation(translation),
     resetForces: () => ref.current().resetForces(true),
@@ -487,7 +466,6 @@ const Physics = ({
 
     return worldRef.current;
   });
-  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
@@ -537,8 +515,8 @@ const Physics = ({
         // Collect previous state
         world.bodies.forEach(b => {
           previousTranslations[b.handle] = {
-            rotation: b.rotation(),
-            translation: b.translation()
+            rotation: rapierQuaternionToQuaternion(b.rotation()).normalize(),
+            translation: rapierVector3ToVector3(b.translation())
           };
         });
         world.step(eventQueue);
@@ -569,15 +547,15 @@ const Physics = ({
         state.isSleeping = rigidBody.isSleeping();
       }
 
-      if (!rigidBody || rigidBody.isSleeping() || rigidBody.isFixed() || !state.setMatrix) {
+      if (!rigidBody || rigidBody.isSleeping() || !state.setMatrix) {
         return;
       }
 
       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;
+      let interpolatedTranslation = oldState ? oldState.translation.lerp(newTranslation, 1) : newTranslation;
+      let interpolatedRotation = oldState ? oldState.rotation.slerp(newRotation, interpolationAlpha) : newRotation;
       state.setMatrix(_matrix4.compose(interpolatedTranslation, interpolatedRotation, state.worldScale).premultiply(state.invertedMatrixWorld));
 
       if (state.mesh instanceof three.InstancedMesh) {
@@ -593,7 +571,7 @@ const Physics = ({
       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) {
+      if (!collider1 || !collider2 || rigidBodyHandle1 === undefined || rigidBodyHandle2 === undefined) {
         return;
       }
 
@@ -637,7 +615,6 @@ const Physics = ({
       colliders: _colliders,
       gravity: _gravity
     },
-    colliderMeshes,
     rigidBodyStates,
     rigidBodyEvents,
     isPaused
@@ -647,6 +624,24 @@ const Physics = ({
   }, children);
 };
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -913,7 +908,8 @@ const usePrismaticJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 
-const _excluded$1 = ["children"];
+const _excluded$1 = ["children"],
+      _excluded2 = ["type", "position", "rotation"];
 const RigidBodyContext = /*#__PURE__*/React.createContext(undefined);
 const useRigidBodyContext = () => React.useContext(RigidBodyContext); // RigidBody
 
@@ -924,6 +920,9 @@ const RigidBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   const [object, api] = useRigidBody(props);
+
+  const objectProps = _objectWithoutProperties(props, _excluded2);
+
   React.useImperativeHandle(ref, () => api);
   return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
     value: {
@@ -932,9 +931,9 @@ const RigidBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       hasCollisionEvents: !!(props.onCollisionEnter || props.onCollisionExit),
       options: props
     }
-  }, /*#__PURE__*/React__default["default"].createElement("object3D", {
+  }, /*#__PURE__*/React__default["default"].createElement("object3D", _extends({
     ref: object
-  }, children));
+  }, objectProps), children));
 });
 
 const MeshCollider = ({
@@ -997,6 +996,17 @@ const geometryFromCollider = collider => {
         return new three.BoxBufferGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
       }
 
+    case rapier3dCompat.ShapeType.RoundCuboid:
+      {
+        const {
+          x,
+          y,
+          z
+        } = collider.shape.halfExtents;
+        const radius = collider.shape.borderRadius;
+        return new threeStdlib.RoundedBoxGeometry(x * 2 + radius * 2, y * 2 + radius * 2, z * 2 + radius * 2, 8, radius);
+      }
+
     case rapier3dCompat.ShapeType.Ball:
       {
         const r = collider.shape.radius;
@@ -1032,7 +1042,38 @@ const geometryFromCollider = collider => {
       {
         const r = collider.shape.radius;
         const h = collider.shape.halfHeight;
-        const g = new three.CylinderBufferGeometry(r, r, h);
+        const g = new three.CylinderBufferGeometry(r, r, h * 2);
+        return g;
+      }
+
+    case rapier3dCompat.ShapeType.Capsule:
+      {
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
+        const g = new three.CapsuleBufferGeometry(r, h * 2, 4, 8);
+        return g;
+      }
+
+    case rapier3dCompat.ShapeType.Cone:
+      {
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
+        const g = new three.ConeBufferGeometry(r, h * 2, 16);
+        return g;
+      }
+
+    case rapier3dCompat.ShapeType.HeightField:
+      {
+        const rows = collider.shape.nrows;
+        const cols = collider.shape.ncols;
+        const heights = collider.shape.heights;
+        const scale = collider.shape.scale;
+        const g = new three.PlaneGeometry(scale.x, scale.z, cols, rows);
+        const verts = g.attributes.position.array;
+        verts.forEach((v, index) => verts[index * 3 + 2] = heights[index] * scale.y);
+        g.scale(1, -1, 1);
+        g.rotateX(-Math.PI / 2);
+        g.rotateY(-Math.PI / 2);
         return g;
       }
   }
@@ -1041,12 +1082,18 @@ const geometryFromCollider = collider => {
 };
 
 const DebugShape = /*#__PURE__*/React.memo(({
-  colliderHandle
+  colliderHandle,
+  color,
+  sleepColor
 }) => {
   const {
     world
   } = useRapier();
   const ref = React.useRef(null);
+  const [material] = React.useState(new three.MeshBasicMaterial({
+    color,
+    wireframe: true
+  }));
   fiber.useFrame(() => {
     const collider = world.getCollider(colliderHandle);
 
@@ -1062,6 +1109,14 @@ const DebugShape = /*#__PURE__*/React.memo(({
         y,
         z
       } = collider.translation();
+      const parent = collider.parent();
+
+      if (parent !== null && parent !== void 0 && parent.isSleeping() || parent !== null && parent !== void 0 && parent.isFixed() || parent !== null && parent !== void 0 && parent.isKinematic()) {
+        material.color = new three.Color(sleepColor);
+      } else {
+        material.color = new three.Color(color);
+      }
+
       ref.current.position.set(x, y, z);
       ref.current.rotation.setFromQuaternion(new three.Quaternion(rx, ry, rz, rw));
     }
@@ -1071,16 +1126,17 @@ const DebugShape = /*#__PURE__*/React.memo(({
     return geometryFromCollider(collider);
   }, [colliderHandle]);
   return /*#__PURE__*/React__default["default"].createElement("mesh", {
-    ref: ref
+    ref: ref,
+    material: material
   }, /*#__PURE__*/React__default["default"].createElement("primitive", {
     object: geometry,
     attach: "geometry"
-  }), /*#__PURE__*/React__default["default"].createElement("meshBasicMaterial", {
-    color: "red",
-    wireframe: true
   }));
 });
-const Debug = () => {
+const Debug = ({
+  color: _color = "red",
+  sleepColor: _sleepColor = "blue"
+}) => {
   const {
     world
   } = useRapier();
@@ -1096,7 +1152,9 @@ const Debug = () => {
   });
   return /*#__PURE__*/React__default["default"].createElement("group", null, colliders.map(handle => /*#__PURE__*/React__default["default"].createElement(DebugShape, {
     key: handle,
-    colliderHandle: handle
+    colliderHandle: handle,
+    color: _color,
+    sleepColor: _sleepColor
   })));
 };
 
@@ -1224,24 +1282,6 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, props.children));
 });
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 const _excluded = ["children"];
 
 const AnyCollider = _ref => {

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

@@ -7,6 +7,8 @@ var React = require('react');
 var useAsset = require('use-asset');
 var fiber = require('@react-three/fiber');
 var three = require('three');
+var BufferGeometryUtils = require('three/examples/jsm/utils/BufferGeometryUtils');
+var threeStdlib = require('three-stdlib');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -73,11 +75,13 @@ const decomposeMatrix4 = m => {
   };
 };
 const scaleColliderArgs = (shape, args, scale) => {
-  // Heightfield only scales the last arg
-  const newArgs = args.slice();
+  const newArgs = args.slice(); // Heightfield uses a vector
 
   if (shape === "heightfield") {
-    newArgs[3] *= scale.x;
+    const s = newArgs[3];
+    s.x *= scale.x;
+    s.x *= scale.y;
+    s.x *= scale.z;
     return newArgs;
   } // Trimesh and convex scale the vertices
 
@@ -85,9 +89,10 @@ const scaleColliderArgs = (shape, args, scale) => {
   if (shape === "trimesh" || shape === "convexHull") {
     newArgs[0] = scaleVertices(newArgs[0], scale);
     return newArgs;
-  }
+  } // Prepfill with some extra
+
 
-  const scaleArray = [scale.x, scale.y, scale.z];
+  const scaleArray = [scale.x, scale.y, scale.z, scale.x, scale.x];
   return newArgs.map((arg, index) => scaleArray[index] * arg);
 };
 const createColliderFromOptions = ({
@@ -163,7 +168,6 @@ const createCollidersFromChildren = ({
 }) => {
   const hasCollisionEvents = !!(options.onCollisionEnter || options.onCollisionExit);
   const colliders = [];
-  new three.Vector3();
   object.traverseVisible(child => {
     if ("isMesh" in child) {
       if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
@@ -244,15 +248,15 @@ const colliderDescFromGeometry = (geometry, colliders, scale, hasCollisionEvents
       {
         var _g$index;
 
-        const _g = geometry.clone().scale(scale.x, scale.y, scale.z);
-
-        desc = rapier3dCompat.ColliderDesc.trimesh(_g.attributes.position.array, (_g$index = _g.index) === null || _g$index === void 0 ? void 0 : _g$index.array);
+        const clonedGeometry = geometry.index ? geometry.clone() : BufferGeometryUtils.mergeVertices(geometry);
+        const g = clonedGeometry.scale(scale.x, scale.y, scale.z);
+        desc = rapier3dCompat.ColliderDesc.trimesh(g.attributes.position.array, (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.array);
       }
       break;
 
     case "hull":
-      const g = geometry.clone().scale(scale.x, scale.y, scale.z);
       {
+        const g = geometry.clone().scale(scale.x, scale.y, scale.z);
         desc = rapier3dCompat.ColliderDesc.convexHull(g.attributes.position.array);
       }
       break;
@@ -319,12 +323,7 @@ const createRigidBodyApi = ref => {
     addTorque: torque => ref.current().addTorque(torque, true),
 
     translation() {
-      const {
-        x,
-        y,
-        z
-      } = ref.current().translation();
-      return new three.Vector3(x, y, z);
+      return rapierVector3ToVector3(ref.current().translation());
     },
 
     setTranslation: translation => ref.current().setTranslation(translation, true),
@@ -339,18 +338,8 @@ const createRigidBodyApi = ref => {
       return new three.Quaternion(x, y, z, w);
     },
 
-    setRotation: ({
-      x,
-      y,
-      z
-    }) => {
-      const q = vector3ToQuaternion(new three.Vector3(x, y, z));
-      ref.current().setRotation({
-        x: q.x,
-        y: q.y,
-        z: q.z,
-        w: q.w
-      }, true);
+    setRotation: rotation => {
+      ref.current().setRotation(rotation, true);
     },
 
     linvel() {
@@ -386,18 +375,8 @@ const createRigidBodyApi = ref => {
     },
 
     setAngularDamping: factor => ref.current().setAngularDamping(factor),
-    setNextKinematicRotation: ({
-      x,
-      y,
-      z
-    }) => {
-      const q = vector3ToQuaternion(new three.Vector3(x, y, z));
-      ref.current().setNextKinematicRotation({
-        x: q.x,
-        y: q.y,
-        z: q.z,
-        w: q.w
-      });
+    setNextKinematicRotation: rotation => {
+      ref.current().setNextKinematicRotation(rotation);
     },
     setNextKinematicTranslation: translation => ref.current().setNextKinematicTranslation(translation),
     resetForces: () => ref.current().resetForces(true),
@@ -487,7 +466,6 @@ const Physics = ({
 
     return worldRef.current;
   });
-  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
@@ -537,8 +515,8 @@ const Physics = ({
         // Collect previous state
         world.bodies.forEach(b => {
           previousTranslations[b.handle] = {
-            rotation: b.rotation(),
-            translation: b.translation()
+            rotation: rapierQuaternionToQuaternion(b.rotation()).normalize(),
+            translation: rapierVector3ToVector3(b.translation())
           };
         });
         world.step(eventQueue);
@@ -569,15 +547,15 @@ const Physics = ({
         state.isSleeping = rigidBody.isSleeping();
       }
 
-      if (!rigidBody || rigidBody.isSleeping() || rigidBody.isFixed() || !state.setMatrix) {
+      if (!rigidBody || rigidBody.isSleeping() || !state.setMatrix) {
         return;
       }
 
       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;
+      let interpolatedTranslation = oldState ? oldState.translation.lerp(newTranslation, 1) : newTranslation;
+      let interpolatedRotation = oldState ? oldState.rotation.slerp(newRotation, interpolationAlpha) : newRotation;
       state.setMatrix(_matrix4.compose(interpolatedTranslation, interpolatedRotation, state.worldScale).premultiply(state.invertedMatrixWorld));
 
       if (state.mesh instanceof three.InstancedMesh) {
@@ -593,7 +571,7 @@ const Physics = ({
       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) {
+      if (!collider1 || !collider2 || rigidBodyHandle1 === undefined || rigidBodyHandle2 === undefined) {
         return;
       }
 
@@ -637,7 +615,6 @@ const Physics = ({
       colliders: _colliders,
       gravity: _gravity
     },
-    colliderMeshes,
     rigidBodyStates,
     rigidBodyEvents,
     isPaused
@@ -647,6 +624,24 @@ const Physics = ({
   }, children);
 };
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -913,7 +908,8 @@ const usePrismaticJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 
-const _excluded$1 = ["children"];
+const _excluded$1 = ["children"],
+      _excluded2 = ["type", "position", "rotation"];
 const RigidBodyContext = /*#__PURE__*/React.createContext(undefined);
 const useRigidBodyContext = () => React.useContext(RigidBodyContext); // RigidBody
 
@@ -924,6 +920,9 @@ const RigidBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   const [object, api] = useRigidBody(props);
+
+  const objectProps = _objectWithoutProperties(props, _excluded2);
+
   React.useImperativeHandle(ref, () => api);
   return /*#__PURE__*/React__default["default"].createElement(RigidBodyContext.Provider, {
     value: {
@@ -932,9 +931,9 @@ const RigidBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       hasCollisionEvents: !!(props.onCollisionEnter || props.onCollisionExit),
       options: props
     }
-  }, /*#__PURE__*/React__default["default"].createElement("object3D", {
+  }, /*#__PURE__*/React__default["default"].createElement("object3D", _extends({
     ref: object
-  }, children));
+  }, objectProps), children));
 });
 
 const MeshCollider = ({
@@ -997,6 +996,17 @@ const geometryFromCollider = collider => {
         return new three.BoxBufferGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
       }
 
+    case rapier3dCompat.ShapeType.RoundCuboid:
+      {
+        const {
+          x,
+          y,
+          z
+        } = collider.shape.halfExtents;
+        const radius = collider.shape.borderRadius;
+        return new threeStdlib.RoundedBoxGeometry(x * 2 + radius * 2, y * 2 + radius * 2, z * 2 + radius * 2, 8, radius);
+      }
+
     case rapier3dCompat.ShapeType.Ball:
       {
         const r = collider.shape.radius;
@@ -1032,7 +1042,38 @@ const geometryFromCollider = collider => {
       {
         const r = collider.shape.radius;
         const h = collider.shape.halfHeight;
-        const g = new three.CylinderBufferGeometry(r, r, h);
+        const g = new three.CylinderBufferGeometry(r, r, h * 2);
+        return g;
+      }
+
+    case rapier3dCompat.ShapeType.Capsule:
+      {
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
+        const g = new three.CapsuleBufferGeometry(r, h * 2, 4, 8);
+        return g;
+      }
+
+    case rapier3dCompat.ShapeType.Cone:
+      {
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
+        const g = new three.ConeBufferGeometry(r, h * 2, 16);
+        return g;
+      }
+
+    case rapier3dCompat.ShapeType.HeightField:
+      {
+        const rows = collider.shape.nrows;
+        const cols = collider.shape.ncols;
+        const heights = collider.shape.heights;
+        const scale = collider.shape.scale;
+        const g = new three.PlaneGeometry(scale.x, scale.z, cols, rows);
+        const verts = g.attributes.position.array;
+        verts.forEach((v, index) => verts[index * 3 + 2] = heights[index] * scale.y);
+        g.scale(1, -1, 1);
+        g.rotateX(-Math.PI / 2);
+        g.rotateY(-Math.PI / 2);
         return g;
       }
   }
@@ -1041,12 +1082,18 @@ const geometryFromCollider = collider => {
 };
 
 const DebugShape = /*#__PURE__*/React.memo(({
-  colliderHandle
+  colliderHandle,
+  color,
+  sleepColor
 }) => {
   const {
     world
   } = useRapier();
   const ref = React.useRef(null);
+  const [material] = React.useState(new three.MeshBasicMaterial({
+    color,
+    wireframe: true
+  }));
   fiber.useFrame(() => {
     const collider = world.getCollider(colliderHandle);
 
@@ -1062,6 +1109,14 @@ const DebugShape = /*#__PURE__*/React.memo(({
         y,
         z
       } = collider.translation();
+      const parent = collider.parent();
+
+      if (parent !== null && parent !== void 0 && parent.isSleeping() || parent !== null && parent !== void 0 && parent.isFixed() || parent !== null && parent !== void 0 && parent.isKinematic()) {
+        material.color = new three.Color(sleepColor);
+      } else {
+        material.color = new three.Color(color);
+      }
+
       ref.current.position.set(x, y, z);
       ref.current.rotation.setFromQuaternion(new three.Quaternion(rx, ry, rz, rw));
     }
@@ -1071,16 +1126,17 @@ const DebugShape = /*#__PURE__*/React.memo(({
     return geometryFromCollider(collider);
   }, [colliderHandle]);
   return /*#__PURE__*/React__default["default"].createElement("mesh", {
-    ref: ref
+    ref: ref,
+    material: material
   }, /*#__PURE__*/React__default["default"].createElement("primitive", {
     object: geometry,
     attach: "geometry"
-  }), /*#__PURE__*/React__default["default"].createElement("meshBasicMaterial", {
-    color: "red",
-    wireframe: true
   }));
 });
-const Debug = () => {
+const Debug = ({
+  color: _color = "red",
+  sleepColor: _sleepColor = "blue"
+}) => {
   const {
     world
   } = useRapier();
@@ -1096,7 +1152,9 @@ const Debug = () => {
   });
   return /*#__PURE__*/React__default["default"].createElement("group", null, colliders.map(handle => /*#__PURE__*/React__default["default"].createElement(DebugShape, {
     key: handle,
-    colliderHandle: handle
+    colliderHandle: handle,
+    color: _color,
+    sleepColor: _sleepColor
   })));
 };
 
@@ -1224,24 +1282,6 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, props.children));
 });
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 const _excluded = ["children"];
 
 const AnyCollider = _ref => {

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

@@ -3,7 +3,9 @@ export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as Rapier
 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';
+import { Quaternion, Euler, Vector3, Object3D, Matrix4, InstancedMesh, MeshBasicMaterial, Color, PlaneGeometry, ConeBufferGeometry, CapsuleBufferGeometry, CylinderBufferGeometry, BufferGeometry, BufferAttribute, SphereBufferGeometry, BoxBufferGeometry, DynamicDrawUsage } from 'three';
+import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils';
+import { RoundedBoxGeometry } from 'three-stdlib';
 
 const _quaternion = new Quaternion();
 const _euler = new Euler();
@@ -48,11 +50,13 @@ const decomposeMatrix4 = m => {
   };
 };
 const scaleColliderArgs = (shape, args, scale) => {
-  // Heightfield only scales the last arg
-  const newArgs = args.slice();
+  const newArgs = args.slice(); // Heightfield uses a vector
 
   if (shape === "heightfield") {
-    newArgs[3] *= scale.x;
+    const s = newArgs[3];
+    s.x *= scale.x;
+    s.x *= scale.y;
+    s.x *= scale.z;
     return newArgs;
   } // Trimesh and convex scale the vertices
 
@@ -60,9 +64,10 @@ const scaleColliderArgs = (shape, args, scale) => {
   if (shape === "trimesh" || shape === "convexHull") {
     newArgs[0] = scaleVertices(newArgs[0], scale);
     return newArgs;
-  }
+  } // Prepfill with some extra
+
 
-  const scaleArray = [scale.x, scale.y, scale.z];
+  const scaleArray = [scale.x, scale.y, scale.z, scale.x, scale.x];
   return newArgs.map((arg, index) => scaleArray[index] * arg);
 };
 const createColliderFromOptions = ({
@@ -138,7 +143,6 @@ const createCollidersFromChildren = ({
 }) => {
   const hasCollisionEvents = !!(options.onCollisionEnter || options.onCollisionExit);
   const colliders = [];
-  new Vector3();
   object.traverseVisible(child => {
     if ("isMesh" in child) {
       if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
@@ -219,15 +223,15 @@ const colliderDescFromGeometry = (geometry, colliders, scale, hasCollisionEvents
       {
         var _g$index;
 
-        const _g = geometry.clone().scale(scale.x, scale.y, scale.z);
-
-        desc = ColliderDesc.trimesh(_g.attributes.position.array, (_g$index = _g.index) === null || _g$index === void 0 ? void 0 : _g$index.array);
+        const clonedGeometry = geometry.index ? geometry.clone() : mergeVertices(geometry);
+        const g = clonedGeometry.scale(scale.x, scale.y, scale.z);
+        desc = ColliderDesc.trimesh(g.attributes.position.array, (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.array);
       }
       break;
 
     case "hull":
-      const g = geometry.clone().scale(scale.x, scale.y, scale.z);
       {
+        const g = geometry.clone().scale(scale.x, scale.y, scale.z);
         desc = ColliderDesc.convexHull(g.attributes.position.array);
       }
       break;
@@ -294,12 +298,7 @@ const createRigidBodyApi = ref => {
     addTorque: torque => ref.current().addTorque(torque, true),
 
     translation() {
-      const {
-        x,
-        y,
-        z
-      } = ref.current().translation();
-      return new Vector3(x, y, z);
+      return rapierVector3ToVector3(ref.current().translation());
     },
 
     setTranslation: translation => ref.current().setTranslation(translation, true),
@@ -314,18 +313,8 @@ const createRigidBodyApi = ref => {
       return new Quaternion(x, y, z, w);
     },
 
-    setRotation: ({
-      x,
-      y,
-      z
-    }) => {
-      const q = vector3ToQuaternion(new Vector3(x, y, z));
-      ref.current().setRotation({
-        x: q.x,
-        y: q.y,
-        z: q.z,
-        w: q.w
-      }, true);
+    setRotation: rotation => {
+      ref.current().setRotation(rotation, true);
     },
 
     linvel() {
@@ -361,18 +350,8 @@ const createRigidBodyApi = ref => {
     },
 
     setAngularDamping: factor => ref.current().setAngularDamping(factor),
-    setNextKinematicRotation: ({
-      x,
-      y,
-      z
-    }) => {
-      const q = vector3ToQuaternion(new Vector3(x, y, z));
-      ref.current().setNextKinematicRotation({
-        x: q.x,
-        y: q.y,
-        z: q.z,
-        w: q.w
-      });
+    setNextKinematicRotation: rotation => {
+      ref.current().setNextKinematicRotation(rotation);
     },
     setNextKinematicTranslation: translation => ref.current().setNextKinematicTranslation(translation),
     resetForces: () => ref.current().resetForces(true),
@@ -462,7 +441,6 @@ const Physics = ({
 
     return worldRef.current;
   });
-  const [colliderMeshes] = useState(() => new Map());
   const [rigidBodyStates] = useState(() => new Map());
   const [rigidBodyEvents] = useState(() => new Map());
   const [eventQueue] = useState(() => new EventQueue(false)); // Init world
@@ -512,8 +490,8 @@ const Physics = ({
         // Collect previous state
         world.bodies.forEach(b => {
           previousTranslations[b.handle] = {
-            rotation: b.rotation(),
-            translation: b.translation()
+            rotation: rapierQuaternionToQuaternion(b.rotation()).normalize(),
+            translation: rapierVector3ToVector3(b.translation())
           };
         });
         world.step(eventQueue);
@@ -544,15 +522,15 @@ const Physics = ({
         state.isSleeping = rigidBody.isSleeping();
       }
 
-      if (!rigidBody || rigidBody.isSleeping() || rigidBody.isFixed() || !state.setMatrix) {
+      if (!rigidBody || rigidBody.isSleeping() || !state.setMatrix) {
         return;
       }
 
       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;
+      let interpolatedTranslation = oldState ? oldState.translation.lerp(newTranslation, 1) : newTranslation;
+      let interpolatedRotation = oldState ? oldState.rotation.slerp(newRotation, interpolationAlpha) : newRotation;
       state.setMatrix(_matrix4.compose(interpolatedTranslation, interpolatedRotation, state.worldScale).premultiply(state.invertedMatrixWorld));
 
       if (state.mesh instanceof InstancedMesh) {
@@ -568,7 +546,7 @@ const Physics = ({
       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) {
+      if (!collider1 || !collider2 || rigidBodyHandle1 === undefined || rigidBodyHandle2 === undefined) {
         return;
       }
 
@@ -612,7 +590,6 @@ const Physics = ({
       colliders: _colliders,
       gravity: _gravity
     },
-    colliderMeshes,
     rigidBodyStates,
     rigidBodyEvents,
     isPaused
@@ -622,6 +599,24 @@ const Physics = ({
   }, children);
 };
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -888,7 +883,8 @@ const usePrismaticJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 
-const _excluded$1 = ["children"];
+const _excluded$1 = ["children"],
+      _excluded2 = ["type", "position", "rotation"];
 const RigidBodyContext = /*#__PURE__*/createContext(undefined);
 const useRigidBodyContext = () => useContext(RigidBodyContext); // RigidBody
 
@@ -899,6 +895,9 @@ const RigidBody = /*#__PURE__*/forwardRef((_ref, ref) => {
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   const [object, api] = useRigidBody(props);
+
+  const objectProps = _objectWithoutProperties(props, _excluded2);
+
   useImperativeHandle(ref, () => api);
   return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
     value: {
@@ -907,9 +906,9 @@ const RigidBody = /*#__PURE__*/forwardRef((_ref, ref) => {
       hasCollisionEvents: !!(props.onCollisionEnter || props.onCollisionExit),
       options: props
     }
-  }, /*#__PURE__*/React.createElement("object3D", {
+  }, /*#__PURE__*/React.createElement("object3D", _extends({
     ref: object
-  }, children));
+  }, objectProps), children));
 });
 
 const MeshCollider = ({
@@ -972,6 +971,17 @@ const geometryFromCollider = collider => {
         return new BoxBufferGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
       }
 
+    case ShapeType.RoundCuboid:
+      {
+        const {
+          x,
+          y,
+          z
+        } = collider.shape.halfExtents;
+        const radius = collider.shape.borderRadius;
+        return new RoundedBoxGeometry(x * 2 + radius * 2, y * 2 + radius * 2, z * 2 + radius * 2, 8, radius);
+      }
+
     case ShapeType.Ball:
       {
         const r = collider.shape.radius;
@@ -1007,7 +1017,38 @@ const geometryFromCollider = collider => {
       {
         const r = collider.shape.radius;
         const h = collider.shape.halfHeight;
-        const g = new CylinderBufferGeometry(r, r, h);
+        const g = new CylinderBufferGeometry(r, r, h * 2);
+        return g;
+      }
+
+    case ShapeType.Capsule:
+      {
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
+        const g = new CapsuleBufferGeometry(r, h * 2, 4, 8);
+        return g;
+      }
+
+    case ShapeType.Cone:
+      {
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
+        const g = new ConeBufferGeometry(r, h * 2, 16);
+        return g;
+      }
+
+    case ShapeType.HeightField:
+      {
+        const rows = collider.shape.nrows;
+        const cols = collider.shape.ncols;
+        const heights = collider.shape.heights;
+        const scale = collider.shape.scale;
+        const g = new PlaneGeometry(scale.x, scale.z, cols, rows);
+        const verts = g.attributes.position.array;
+        verts.forEach((v, index) => verts[index * 3 + 2] = heights[index] * scale.y);
+        g.scale(1, -1, 1);
+        g.rotateX(-Math.PI / 2);
+        g.rotateY(-Math.PI / 2);
         return g;
       }
   }
@@ -1016,12 +1057,18 @@ const geometryFromCollider = collider => {
 };
 
 const DebugShape = /*#__PURE__*/memo(({
-  colliderHandle
+  colliderHandle,
+  color,
+  sleepColor
 }) => {
   const {
     world
   } = useRapier();
   const ref = useRef(null);
+  const [material] = useState(new MeshBasicMaterial({
+    color,
+    wireframe: true
+  }));
   useFrame(() => {
     const collider = world.getCollider(colliderHandle);
 
@@ -1037,6 +1084,14 @@ const DebugShape = /*#__PURE__*/memo(({
         y,
         z
       } = collider.translation();
+      const parent = collider.parent();
+
+      if (parent !== null && parent !== void 0 && parent.isSleeping() || parent !== null && parent !== void 0 && parent.isFixed() || parent !== null && parent !== void 0 && parent.isKinematic()) {
+        material.color = new Color(sleepColor);
+      } else {
+        material.color = new Color(color);
+      }
+
       ref.current.position.set(x, y, z);
       ref.current.rotation.setFromQuaternion(new Quaternion(rx, ry, rz, rw));
     }
@@ -1046,16 +1101,17 @@ const DebugShape = /*#__PURE__*/memo(({
     return geometryFromCollider(collider);
   }, [colliderHandle]);
   return /*#__PURE__*/React.createElement("mesh", {
-    ref: ref
+    ref: ref,
+    material: material
   }, /*#__PURE__*/React.createElement("primitive", {
     object: geometry,
     attach: "geometry"
-  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
-    color: "red",
-    wireframe: true
   }));
 });
-const Debug = () => {
+const Debug = ({
+  color: _color = "red",
+  sleepColor: _sleepColor = "blue"
+}) => {
   const {
     world
   } = useRapier();
@@ -1071,7 +1127,9 @@ const Debug = () => {
   });
   return /*#__PURE__*/React.createElement("group", null, colliders.map(handle => /*#__PURE__*/React.createElement(DebugShape, {
     key: handle,
-    colliderHandle: handle
+    colliderHandle: handle,
+    color: _color,
+    sleepColor: _sleepColor
   })));
 };
 
@@ -1199,24 +1257,6 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
   }, props.children));
 });
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 const _excluded = ["children"];
 
 const AnyCollider = _ref => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.6.5",
+  "version": "0.6.8",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",
@@ -20,7 +20,8 @@
   "peerDependencies": {
     "@react-three/fiber": "^8.0.12",
     "react": "^18.0.0",
-    "three": "^0.139.2"
+    "three": "^0.139.2",
+    "three-stdlib": "^2.15.0"
   },
   "dependencies": {
     "@dimforge/rapier3d-compat": "0.9.0",

package/readme.md

@@ -80,8 +80,8 @@ const Scene = () => (
     {/* Make a compound shape with two custom BallColliders */}
     <RigidBody position={[0, 10, 0]}>
       <Sphere />
-      <BallCollider args={0.5} />
-      <BallCollider args={0.5} position={[1, 0, 0]} />
+      <BallCollider args={[0.5]} />
+      <BallCollider args={[0.5]} position={[1, 0, 0]} />
     </RigidBody>
 
     {/* Make a compound shape with two custom BallColliders, an automatic BallCollider,
@@ -97,8 +97,8 @@ const Scene = () => (
 
       <Sphere />
 
-      <BallCollider args={0.5} />
-      <BallCollider args={0.5} position={[1, 0, 0]} />
+      <BallCollider args={[0.5]} />
+      <BallCollider args={[0.5]} position={[1, 0, 0]} />
     </RigidBody>
   </Physics>
 );
@@ -185,6 +185,9 @@ const Scene = () => {
 
 Use the Debug component to see live representations of all colliders in a scene.
 
+- The `color` prop sets the color of awake colliders that are affected by forces.
+- The `sleepColor` prop set the color of a static (fixed, or kinematic) or sleeping collider.
+
 > Note: Experimental. Not all shapes are supported. Unsupported shapes are always represented by cubes.
 
 ```tsx
@@ -194,7 +197,7 @@ import { RigidBody, Debug } from "@react-three/rapier";
 const Scene = () => {
   return (
     <Physics>
-      <Debug />
+      <Debug color="red" sleepColor="blue" />
 
       <RigidBody>
         <Box />