@react-three/rapier 0.7.6 → 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, { useState, useEffect, useRef, 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();
@@ -173,10 +173,19 @@ const createWorldApi = ref => {
     getRigidBody: handle => ref.current().getRigidBody(handle),
     createRigidBody: desc => ref.current().createRigidBody(desc),
     createCollider: (desc, rigidBody) => ref.current().createCollider(desc, rigidBody),
-    removeRigidBody: rigidBody => ref.current().removeRigidBody(rigidBody),
-    removeCollider: (collider, wakeUp = true) => ref.current().removeCollider(collider, wakeUp),
+    removeRigidBody: rigidBody => {
+      if (!ref.current().bodies.contains(rigidBody.handle)) return;
+      ref.current().removeRigidBody(rigidBody);
+    },
+    removeCollider: (collider, wakeUp = true) => {
+      if (!ref.current().colliders.contains(collider.handle)) return;
+      ref.current().removeCollider(collider, wakeUp);
+    },
     createImpulseJoint: (params, rigidBodyA, rigidBodyB, wakeUp = true) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB, wakeUp),
-    removeImpulseJoint: (joint, wakeUp = true) => ref.current().removeImpulseJoint(joint, wakeUp),
+    removeImpulseJoint: (joint, wakeUp = true) => {
+      if (!ref.current().impulseJoints.contains(joint.handle)) return;
+      ref.current().removeImpulseJoint(joint, wakeUp);
+    },
     forEachCollider: callback => ref.current().forEachCollider(callback),
     setGravity: ({
       x,
@@ -186,7 +195,8 @@ const createWorldApi = ref => {
       x,
       y,
       z
-    }
+    },
+    debugRender: () => ref.current().debugRender()
   };
 }; // TODO: Broken currently, waiting for Rapier3D to fix
 
@@ -220,10 +230,6 @@ const Physics = ({
   updatePriority
 }) => {
   const rapier = useAsset(importRapier);
-  const [isPaused, setIsPaused] = useState(_paused);
-  useEffect(() => {
-    setIsPaused(_paused);
-  }, [_paused]);
   const worldRef = useRef();
   const getWorldRef = useRef(() => {
     if (!worldRef.current) {
@@ -244,6 +250,7 @@ const Physics = ({
     return () => {
       if (world) {
         world.free();
+        worldRef.current = undefined;
       }
     };
   }, []); // Update gravity
@@ -477,15 +484,15 @@ const Physics = ({
     colliderStates,
     rigidBodyEvents,
     colliderEvents,
-    isPaused
-  }), [isPaused]);
-  return /*#__PURE__*/React.createElement(RapierContext.Provider, {
+    isPaused: _paused
+  }), [_paused]);
+  return /*#__PURE__*/React$1.createElement(RapierContext.Provider, {
     value: context
   }, children);
 };
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -498,7 +505,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -672,11 +678,11 @@ const useUpdateRigidBodyOptions = (rigidBodyRef, props, states, updateTranslatio
     return vectorToTuple(props[key]);
   }), [props]);
   useEffect(() => {
-    if ("length" in rigidBodyRef.current) {
-      rigidBodyRef.current.forEach(rigidBody => {
+    if (Array.isArray(rigidBodyRef.current)) {
+      for (const rigidBody of rigidBodyRef.current) {
         setRigidBodyOptions(rigidBody, props, states, updateTranslations);
-      });
-    } else {
+      }
+    } else if (rigidBodyRef.current) {
       setRigidBodyOptions(rigidBodyRef.current, props, states, updateTranslations);
     }
   }, mutablePropsAsFlatArray);
@@ -699,20 +705,20 @@ const useRigidBodyEvents = (rigidBodyRef, props, events) => {
     onIntersectionExit
   };
   useEffect(() => {
-    if ("length" in rigidBodyRef.current) {
-      rigidBodyRef.current.forEach(rigidBody => {
+    if (Array.isArray(rigidBodyRef.current)) {
+      for (const rigidBody of rigidBodyRef.current) {
         events.set(rigidBody.handle, eventHandlers);
-      });
-    } else {
+      }
+    } else if (rigidBodyRef.current) {
       events.set(rigidBodyRef.current.handle, eventHandlers);
     }
 
     return () => {
-      if ("length" in rigidBodyRef.current) {
-        rigidBodyRef.current.forEach(rigidBody => {
+      if (Array.isArray(rigidBodyRef.current)) {
+        for (const rigidBody of rigidBodyRef.current) {
           events.delete(rigidBody.handle);
-        });
-      } else {
+        }
+      } else if (rigidBodyRef.current) {
         events.delete(rigidBodyRef.current.handle);
       }
     };
@@ -880,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);
@@ -905,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) => {
@@ -1053,6 +1067,7 @@ const useRigidBody = (options = {}) => {
     return () => {
       world.removeRigidBody(rigidBody);
       rigidBodyStates.delete(rigidBody.handle);
+      rigidBodyRef.current = undefined;
     };
   }, []);
   useUpdateRigidBodyOptions(rigidBodyRef, mergedOptions, rigidBodyStates);
@@ -1149,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,
@@ -1169,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;
   }, []);
@@ -1210,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,
@@ -1218,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
   }));
@@ -1294,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)))));
 }));
@@ -1328,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"];
@@ -1614,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.6",
+  "version": "0.8.0",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",
@@ -8,19 +8,22 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "ts": "tsc -w"
+  },
   "devDependencies": {
-    "@react-three/drei": "^9.6.2",
-    "@react-three/fiber": "^8.0.12",
+    "@react-three/drei": "^9.34.1",
+    "@react-three/fiber": "^8.8.9",
     "@react-three/test-renderer": "^8.0.17",
     "@types/react-dom": "^18.0.2",
     "@types/three": "^0.139.0",
     "@vitejs/plugin-react": "^2.1.0",
-    "@vitest/ui": "^0.23.4",
-    "happy-dom": "^6.0.4",
+    "@vitest/ui": "^0.24.1",
+    "happy-dom": "^7.5.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "three": "^0.139.2",
-    "vitest": "^0.23.4"
+    "vitest": "^0.24.1"
   },
   "peerDependencies": {
     "@react-three/fiber": "^8.0.12",

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 />