@react-three/rapier 0.7.7 → 0.8.0

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

@@ -1,10 +1,10 @@
-import { EventQueue, RigidBodyDesc, ColliderDesc, ActiveEvents, ShapeType } from '@dimforge/rapier3d-compat';
+import { EventQueue, RigidBodyDesc, ColliderDesc, ActiveEvents } from '@dimforge/rapier3d-compat';
 export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody } from '@dimforge/rapier3d-compat';
-import React, { useRef, useState, useEffect, useMemo, createContext, useContext, memo, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
+import React$1, { useRef, useState, useEffect, useMemo, createContext, useContext, memo, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
 import { useAsset } from 'use-asset';
 import { useFrame } from '@react-three/fiber';
-import { Quaternion, Euler, Vector3, Object3D, Matrix4, MathUtils, InstancedMesh, MeshBasicMaterial, Color, PlaneGeometry, ConeGeometry, CapsuleGeometry, CylinderGeometry, BufferGeometry, BufferAttribute, SphereGeometry, BoxGeometry, DynamicDrawUsage } from 'three';
-import { mergeVertices, RoundedBoxGeometry } from 'three-stdlib';
+import { Quaternion, Euler, Vector3, Object3D, Matrix4, MathUtils, InstancedMesh, BufferAttribute, DynamicDrawUsage } from 'three';
+import { mergeVertices } from 'three-stdlib';
 
 const _quaternion = new Quaternion();
 new Euler();
@@ -195,7 +195,8 @@ const createWorldApi = ref => {
       x,
       y,
       z
-    }
+    },
+    debugRender: () => ref.current().debugRender()
   };
 }; // TODO: Broken currently, waiting for Rapier3D to fix
 
@@ -485,7 +486,7 @@ const Physics = ({
     colliderEvents,
     isPaused: _paused
   }), [_paused]);
-  return /*#__PURE__*/React.createElement(RapierContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(RapierContext.Provider, {
     value: context
   }, children);
 };
@@ -885,7 +886,8 @@ const createColliderPropsFromChildren = ({
   const colliderProps = [];
   object.updateWorldMatrix(true, false);
   const invertedParentMatrixWorld = object.matrixWorld.clone().invert();
-  object.traverseVisible(child => {
+
+  const colliderFromChild = child => {
     if ("isMesh" in child) {
       if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
       const worldScale = child.getWorldScale(_scale);
@@ -910,7 +912,14 @@ const createColliderPropsFromChildren = ({
         scale: [worldScale.x, worldScale.y, worldScale.z]
       }));
     }
-  });
+  };
+
+  if (options.includeInvisible) {
+    object.traverse(colliderFromChild);
+  } else {
+    object.traverseVisible(colliderFromChild);
+  }
+
   return colliderProps;
 };
 const getColliderArgsFromGeometry = (geometry, colliders) => {
@@ -1155,7 +1164,7 @@ const usePrismaticJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
 };
 
 // Colliders
-const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/React$1.forwardRef((props, forwardedRef) => {
   const {
     children,
     position,
@@ -1175,7 +1184,7 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/React.forwardRef((props, for
       return forwardedRef;
     }
 
-    const result = /*#__PURE__*/React.createRef();
+    const result = /*#__PURE__*/React$1.createRef();
     result.current = [];
     return result;
   }, []);
@@ -1216,7 +1225,7 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/React.forwardRef((props, for
   }, [props, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options]);
   useUpdateColliderOptions(collidersRef, mergedProps, colliderStates);
   useColliderEvents(collidersRef, mergedProps, colliderEvents);
-  return /*#__PURE__*/React.createElement("object3D", {
+  return /*#__PURE__*/React$1.createElement("object3D", {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
@@ -1224,56 +1233,56 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/React.forwardRef((props, for
     ref: ref
   }, children);
 }));
-const CuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const CuboidCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "cuboid",
     ref: ref
   }));
 });
-const RoundCuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const RoundCuboidCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "roundCuboid",
     ref: ref
   }));
 });
-const BallCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const BallCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "ball",
     ref: ref
   }));
 });
-const CapsuleCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const CapsuleCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "capsule",
     ref: ref
   }));
 });
-const HeightfieldCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const HeightfieldCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "heightfield",
     ref: ref
   }));
 });
-const TrimeshCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const TrimeshCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "trimesh",
     ref: ref
   }));
 });
-const ConeCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const ConeCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "cone",
     ref: ref
   }));
 });
-const CylinderCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const CylinderCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "cylinder",
     ref: ref
   }));
 });
-const ConvexHullCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const ConvexHullCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "convexHull",
     ref: ref
   }));
@@ -1300,16 +1309,16 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
     api,
     options: props
   }), [object, api, props]);
-  return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(RigidBodyContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement("object3D", _extends({
+  }, /*#__PURE__*/React$1.createElement("object3D", _extends({
     ref: object
   }, objectProps, {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
     scale: scale
-  }), children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
+  }), children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React$1.createElement(AnyCollider, _extends({
     key: index
   }, colliderProps)))));
 }));
@@ -1334,188 +1343,34 @@ const MeshCollider = props => {
     });
   }, [physicsOptions, options]);
   const childColliderProps = useChildColliderProps(object, mergedOptions, false);
-  return /*#__PURE__*/React.createElement("object3D", {
+  return /*#__PURE__*/React$1.createElement("object3D", {
     ref: object,
     userData: {
       r3RapierType: "MeshCollider"
     }
-  }, children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
+  }, children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React$1.createElement(AnyCollider, _extends({
     key: index
   }, colliderProps))));
 };
 
-const geometryFromCollider = collider => {
-  switch (collider.shape.type) {
-    case ShapeType.Cuboid:
-      {
-        const {
-          x,
-          y,
-          z
-        } = collider.shape.halfExtents;
-        return new BoxGeometry(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;
-        return new SphereGeometry(r + +0.01, 8, 8);
-      }
-
-    case ShapeType.TriMesh:
-      {
-        var _g$index;
-
-        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;
-      }
-
-    case ShapeType.ConvexPolyhedron:
-      {
-        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(safeVerts, 3));
-        return cg;
-      }
-
-    case ShapeType.Cylinder:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new CylinderGeometry(r, r, h * 2);
-        return g;
-      }
-
-    case ShapeType.Capsule:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new CapsuleGeometry(r, h * 2, 4, 8);
-        return g;
-      }
-
-    case ShapeType.Cone:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new ConeGeometry(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;
-      }
-  }
-
-  return new BoxGeometry(1, 1, 1);
-};
-
-const DebugShape = /*#__PURE__*/memo(({
-  colliderHandle,
-  color,
-  sleepColor
-}) => {
+const Debug = () => {
   const {
     world
   } = useRapier();
   const ref = useRef(null);
-  const [material] = useState(new MeshBasicMaterial({
-    color,
-    wireframe: true
-  }));
-  useFrame(() => {
-    const collider = world.getCollider(colliderHandle);
-
-    if (ref.current && collider) {
-      const {
-        x: rx,
-        y: ry,
-        z: rz,
-        w: rw
-      } = collider.rotation();
-      const {
-        x,
-        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));
-    }
-  });
-  const geometry = useMemo(() => {
-    const collider = world.getCollider(colliderHandle);
-    return geometryFromCollider(collider);
-  }, [colliderHandle]);
-  return /*#__PURE__*/React.createElement("mesh", {
-    ref: ref,
-    material: material
-  }, /*#__PURE__*/React.createElement("primitive", {
-    object: geometry,
-    attach: "geometry"
-  }));
-});
-const Debug = ({
-  color: _color = "red",
-  sleepColor: _sleepColor = "blue"
-}) => {
-  const {
-    world
-  } = useRapier();
-  const [colliders, setColliders] = useState([]);
-  useRef({});
-
   useFrame(() => {
-    const newColliders = [];
-    world.forEachCollider(collider => {
-      newColliders.push(collider.handle);
-    });
-    setColliders(newColliders);
+    const mesh = ref.current;
+    if (!mesh) return;
+    const buffers = world.debugRender();
+    mesh.geometry.setAttribute("position", new BufferAttribute(buffers.vertices, 3));
+    mesh.geometry.setAttribute("color", new BufferAttribute(buffers.colors, 4));
   });
-  return /*#__PURE__*/React.createElement("group", null, colliders.map(handle => /*#__PURE__*/React.createElement(DebugShape, {
-    key: handle,
-    colliderHandle: handle,
-    color: _color,
-    sleepColor: _sleepColor
-  })));
+  return /*#__PURE__*/React.createElement("lineSegments", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement("lineBasicMaterial", {
+    color: 0xffffff,
+    vertexColors: true
+  }), /*#__PURE__*/React.createElement("bufferGeometry", null));
 };
 
 const _excluded = ["positions", "rotations", "children"];
@@ -1620,11 +1475,11 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
       options: mergedOptions
     };
   }, [api, mergedOptions]);
-  return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(RigidBodyContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement("object3D", {
+  }, /*#__PURE__*/React$1.createElement("object3D", {
     ref: object
-  }, props.children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
+  }, props.children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React$1.createElement(AnyCollider, _extends({
     key: index
   }, colliderProps)))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",
@@ -8,6 +8,9 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "ts": "tsc -w"
+  },
   "devDependencies": {
     "@react-three/drei": "^9.34.1",
     "@react-three/fiber": "^8.8.9",

package/readme.md

@@ -122,6 +122,16 @@ const Scene = () => (
 );
 ```
 
+If part of our meshes are invisible and you want to include them in the collider creation, use the `includeInvisible` flag.
+
+```tsx
+<RigidBody colliders="hull" includeInvisible>
+  <object3D>
+    <Suzanne visible={false} />
+  </object3D>
+</RigidBody>
+```
+
 ## Instanced Meshes
 
 Instanced meshes can also be used and have automatic colliders generated from their mesh.
@@ -185,12 +195,7 @@ const Scene = () => {
 
 ## Debug
 
-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.
+Use the Debug component to see live representations of all colliders in a scene, using the live debug buffer from the physics engine.
 
 ```tsx
 import { Box, Sphere } from "@react-three/drei";
@@ -199,7 +204,7 @@ import { RigidBody, Debug } from "@react-three/rapier";
 const Scene = () => {
   return (
     <Physics>
-      <Debug color="red" sleepColor="blue" />
+      <Debug />
 
       <RigidBody>
         <Box />