@react-three/rapier 0.7.4 → 0.7.6

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

@@ -3,7 +3,7 @@ export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as Rapier
 import React, { useState, useEffect, useRef, 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, ConeBufferGeometry, CapsuleBufferGeometry, CylinderBufferGeometry, BufferGeometry, BufferAttribute, SphereBufferGeometry, BoxBufferGeometry, DynamicDrawUsage } from 'three';
+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';
 
 const _quaternion = new Quaternion();
@@ -48,6 +48,23 @@ const scaleVertices = (vertices, scale) => {
 
   return scaledVerts;
 };
+const vectorToTuple = v => {
+  if (!v) return [0];
+
+  if (v instanceof Quaternion) {
+    return [v.x, v.y, v.z, v.w];
+  }
+
+  if (v instanceof Vector3 || v instanceof Euler) {
+    return [v.x, v.y, v.z];
+  }
+
+  if (Array.isArray(v)) {
+    return v;
+  }
+
+  return [v];
+};
 
 const createRigidBodyApi = ref => {
   return {
@@ -59,24 +76,24 @@ const createRigidBodyApi = ref => {
 
     mass: () => ref.current().mass(),
 
-    applyImpulse(impulseVector) {
-      ref.current().applyImpulse(impulseVector, true);
+    applyImpulse(impulseVector, wakeUp = true) {
+      ref.current().applyImpulse(impulseVector, wakeUp);
     },
 
-    applyTorqueImpulse(torqueVector) {
-      ref.current().applyTorqueImpulse(torqueVector, true);
+    applyTorqueImpulse(torqueVector, wakeUp = true) {
+      ref.current().applyTorqueImpulse(torqueVector, wakeUp);
     },
 
-    applyImpulseAtPoint: (impulseVector, impulsePoint) => ref.current().applyImpulseAtPoint(impulseVector, impulsePoint, true),
-    addForce: force => ref.current().addForce(force, true),
-    addForceAtPoint: (force, point) => ref.current().addForceAtPoint(force, point, true),
-    addTorque: torque => ref.current().addTorque(torque, true),
+    applyImpulseAtPoint: (impulseVector, impulsePoint, wakeUp = true) => ref.current().applyImpulseAtPoint(impulseVector, impulsePoint, wakeUp),
+    addForce: (force, wakeUp = true) => ref.current().addForce(force, wakeUp),
+    addForceAtPoint: (force, point, wakeUp = true) => ref.current().addForceAtPoint(force, point, wakeUp),
+    addTorque: (torque, wakeUp = true) => ref.current().addTorque(torque, wakeUp),
 
     translation() {
       return rapierVector3ToVector3(ref.current().translation());
     },
 
-    setTranslation: translation => ref.current().setTranslation(translation, true),
+    setTranslation: (translation, wakeUp = true) => ref.current().setTranslation(translation, wakeUp),
 
     rotation() {
       const {
@@ -88,8 +105,8 @@ const createRigidBodyApi = ref => {
       return new Quaternion(x, y, z, w);
     },
 
-    setRotation: rotation => {
-      ref.current().setRotation(rotation, true);
+    setRotation: (rotation, wakeUp = true) => {
+      ref.current().setRotation(rotation, wakeUp);
     },
 
     linvel() {
@@ -101,7 +118,7 @@ const createRigidBodyApi = ref => {
       return new Vector3(x, y, z);
     },
 
-    setLinvel: velocity => ref.current().setLinvel(velocity, true),
+    setLinvel: (velocity, wakeUp = true) => ref.current().setLinvel(velocity, wakeUp),
 
     angvel() {
       const {
@@ -112,7 +129,7 @@ const createRigidBodyApi = ref => {
       return new Vector3(x, y, z);
     },
 
-    setAngvel: velocity => ref.current().setAngvel(velocity, true),
+    setAngvel: (velocity, wakeUp = true) => ref.current().setAngvel(velocity, wakeUp),
 
     linearDamping() {
       return ref.current().linearDamping();
@@ -129,12 +146,12 @@ const createRigidBodyApi = ref => {
       ref.current().setNextKinematicRotation(rotation);
     },
     setNextKinematicTranslation: translation => ref.current().setNextKinematicTranslation(translation),
-    resetForces: () => ref.current().resetForces(true),
-    resetTorques: () => ref.current().resetTorques(true),
-    lockRotations: locked => ref.current().lockRotations(locked, true),
-    lockTranslations: locked => ref.current().lockTranslations(locked, true),
-    setEnabledRotations: (x, y, z) => ref.current().setEnabledRotations(x, y, z, true),
-    setEnabledTranslations: (x, y, z) => ref.current().setEnabledTranslations(x, y, z, true)
+    resetForces: (wakeUp = true) => ref.current().resetForces(wakeUp),
+    resetTorques: (wakeUp = true) => ref.current().resetTorques(wakeUp),
+    lockRotations: (locked, wakeUp = true) => ref.current().lockRotations(locked, wakeUp),
+    lockTranslations: (locked, wakeUp = true) => ref.current().lockTranslations(locked, wakeUp),
+    setEnabledRotations: (x, y, z, wakeUp = true) => ref.current().setEnabledRotations(x, y, z, wakeUp),
+    setEnabledTranslations: (x, y, z, wakeUp = true) => ref.current().setEnabledTranslations(x, y, z, wakeUp)
   };
 };
 const createInstancedRigidBodiesApi = bodiesGetter => ({
@@ -157,9 +174,9 @@ const createWorldApi = ref => {
     createRigidBody: desc => ref.current().createRigidBody(desc),
     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, true),
-    removeImpulseJoint: joint => ref.current().removeImpulseJoint(joint, true),
+    removeCollider: (collider, wakeUp = true) => 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),
     forEachCollider: callback => ref.current().forEachCollider(callback),
     setGravity: ({
       x,
@@ -618,7 +635,11 @@ const mutableRigidBodyOptions = {
   },
   ccd: (rb, value) => {
     rb.enableCcd(value);
-  }
+  },
+  position: () => {},
+  rotation: () => {},
+  quaternion: () => {},
+  scale: () => {}
 };
 const mutableRigidBodyOptionKeys = Object.keys(mutableRigidBodyOptions);
 const setRigidBodyOptions = (rigidBody, options, states, updateTranslations = true) => {
@@ -646,6 +667,10 @@ const setRigidBodyOptions = (rigidBody, options, states, updateTranslations = tr
   }
 };
 const useUpdateRigidBodyOptions = (rigidBodyRef, props, states, updateTranslations = true) => {
+  // TODO: Improve this, split each prop into its own effect
+  const mutablePropsAsFlatArray = useMemo(() => mutableRigidBodyOptionKeys.flatMap(key => {
+    return vectorToTuple(props[key]);
+  }), [props]);
   useEffect(() => {
     if ("length" in rigidBodyRef.current) {
       rigidBodyRef.current.forEach(rigidBody => {
@@ -654,7 +679,7 @@ const useUpdateRigidBodyOptions = (rigidBodyRef, props, states, updateTranslatio
     } else {
       setRigidBodyOptions(rigidBodyRef.current, props, states, updateTranslations);
     }
-  }, [props]);
+  }, mutablePropsAsFlatArray);
 };
 const useRigidBodyEvents = (rigidBodyRef, props, events) => {
   const {
@@ -691,7 +716,7 @@ const useRigidBodyEvents = (rigidBodyRef, props, events) => {
         events.delete(rigidBodyRef.current.handle);
       }
     };
-  }, [onWake, onSleep, onCollisionEnter, onCollisionExit]);
+  }, [onWake, onSleep, onCollisionEnter, onCollisionExit, onIntersectionEnter, onIntersectionExit]);
 };
 
 const scaleColliderArgs = (shape, args, scale) => {
@@ -721,6 +746,32 @@ const createColliderFromOptions = (options, world, scale, rigidBody) => {
   const desc = ColliderDesc[options.shape](...scaledArgs);
   return world.createCollider(desc, rigidBody);
 };
+const massPropertiesConflictError = "Please pick ONLY ONE of the `density`, `mass` and `massProperties` options.";
+
+const setColliderMassOptions = (collider, options) => {
+  if (options.density !== undefined) {
+    if (options.mass !== undefined || options.massProperties !== undefined) {
+      throw new Error(massPropertiesConflictError);
+    }
+
+    collider.setDensity(options.density);
+    return;
+  }
+
+  if (options.mass !== undefined) {
+    if (options.massProperties !== undefined) {
+      throw new Error(massPropertiesConflictError);
+    }
+
+    collider.setMass(options.mass);
+    return;
+  }
+
+  if (options.massProperties !== undefined) {
+    collider.setMassProperties(options.massProperties.mass, options.massProperties.centerOfMass, options.massProperties.principalAngularInertia, options.massProperties.angularInertiaLocalFrame);
+  }
+};
+
 const mutableColliderOptions = {
   sensor: (collider, value) => {
     collider.setSensor(value);
@@ -734,15 +785,20 @@ const mutableColliderOptions = {
   friction: (collider, value) => {
     collider.setFriction(value);
   },
+  frictionCombineRule: (collider, value) => {
+    collider.setFrictionCombineRule(value);
+  },
   restitution: (collider, value) => {
     collider.setRestitution(value);
   },
-  density: (collider, value) => {
-    collider.setDensity(value);
+  restitutionCombineRule: (collider, value) => {
+    collider.setRestitutionCombineRule(value);
   },
-  mass: (collider, value) => {
-    collider.setMass(value);
-  }
+  // To make sure the options all mutalbe options are listed
+  quaternion: () => {},
+  position: () => {},
+  rotation: () => {},
+  scale: () => {}
 };
 const mutableColliderOptionKeys = Object.keys(mutableColliderOptions);
 const setColliderOptions = (collider, options, states) => {
@@ -773,17 +829,26 @@ const setColliderOptions = (collider, options, states) => {
 
     mutableColliderOptionKeys.forEach(key => {
       if (key in options) {
-        mutableColliderOptions[key](collider, options[key]);
+        const option = options[key];
+        mutableColliderOptions[key](collider, // @ts-ignore Option does not want to fit into the function, but it will
+        option, options);
       }
-    });
+    }); // handle mass separately, because the assignments
+    // are exclusive.
+
+    setColliderMassOptions(collider, options);
   }
 };
 const useUpdateColliderOptions = (collidersRef, props, states) => {
+  // TODO: Improve this, split each prop into its own effect
+  const mutablePropsAsFlatArray = useMemo(() => mutableColliderOptionKeys.flatMap(key => {
+    return vectorToTuple(props[key]);
+  }), [props]);
   useEffect(() => {
     collidersRef.current.forEach(collider => {
       setColliderOptions(collider, props, states);
     });
-  }, [props]);
+  }, mutablePropsAsFlatArray);
 };
 
 const isChildOfMeshCollider = child => {
@@ -924,7 +989,7 @@ const useColliderEvents = (collidersRef, props, events) => {
 
       (_collidersRef$current2 = collidersRef.current) === null || _collidersRef$current2 === void 0 ? void 0 : _collidersRef$current2.forEach(collider => events.delete(collider.handle));
     };
-  }, [onCollisionEnter, onCollisionExit]);
+  }, [onCollisionEnter, onCollisionExit, onIntersectionEnter, onIntersectionExit]);
 };
 
 const useRapier = () => {
@@ -1084,7 +1149,7 @@ const usePrismaticJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
 };
 
 // Colliders
-const AnyCollider = /*#__PURE__*/memo(props => {
+const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
   const {
     children,
     position,
@@ -1099,7 +1164,15 @@ const AnyCollider = /*#__PURE__*/memo(props => {
   } = useRapier();
   const rigidBodyContext = useRigidBodyContext();
   const ref = useRef(null);
-  const collidersRef = useRef([]);
+  const collidersRef = useMemo(() => {
+    if (forwardedRef !== null) {
+      return forwardedRef;
+    }
+
+    const result = /*#__PURE__*/React.createRef();
+    result.current = [];
+    return result;
+  }, []);
   useEffect(() => {
     const object = ref.current;
     const worldScale = object.getWorldScale(new Vector3());
@@ -1144,57 +1217,66 @@ const AnyCollider = /*#__PURE__*/memo(props => {
     scale: scale,
     ref: ref
   }, children);
-});
-const CuboidCollider = props => {
+}));
+const CuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "cuboid"
+    shape: "cuboid",
+    ref: ref
   }));
-};
-const RoundCuboidCollider = props => {
+});
+const RoundCuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "roundCuboid"
+    shape: "roundCuboid",
+    ref: ref
   }));
-};
-const BallCollider = props => {
+});
+const BallCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "ball"
+    shape: "ball",
+    ref: ref
   }));
-};
-const CapsuleCollider = props => {
+});
+const CapsuleCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "capsule"
+    shape: "capsule",
+    ref: ref
   }));
-};
-const HeightfieldCollider = props => {
+});
+const HeightfieldCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "heightfield"
+    shape: "heightfield",
+    ref: ref
   }));
-};
-const TrimeshCollider = props => {
+});
+const TrimeshCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "trimesh"
+    shape: "trimesh",
+    ref: ref
   }));
-};
-const ConeCollider = props => {
+});
+const ConeCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "cone"
+    shape: "cone",
+    ref: ref
   }));
-};
-const CylinderCollider = props => {
+});
+const CylinderCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "cylinder"
+    shape: "cylinder",
+    ref: ref
   }));
-};
-const ConvexHullCollider = props => {
+});
+const ConvexHullCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "convexHull"
+    shape: "convexHull",
+    ref: ref
   }));
-};
+});
 
 const _excluded$1 = ["children", "type", "position", "rotation", "scale", "quaternion"];
 const RigidBodyContext = /*#__PURE__*/createContext(undefined);
 const useRigidBodyContext = () => useContext(RigidBodyContext);
-const RigidBody = /*#__PURE__*/forwardRef((props, ref) => {
+const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     type,
@@ -1224,7 +1306,7 @@ const RigidBody = /*#__PURE__*/forwardRef((props, ref) => {
   }), children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
     key: index
   }, colliderProps)))));
-});
+}));
 
 const MeshCollider = props => {
   const {
@@ -1265,7 +1347,7 @@ const geometryFromCollider = collider => {
           y,
           z
         } = collider.shape.halfExtents;
-        return new BoxBufferGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
+        return new BoxGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
       }
 
     case ShapeType.RoundCuboid:
@@ -1282,7 +1364,7 @@ const geometryFromCollider = collider => {
     case ShapeType.Ball:
       {
         const r = collider.shape.radius;
-        return new SphereBufferGeometry(r + +0.01, 8, 8);
+        return new SphereGeometry(r + +0.01, 8, 8);
       }
 
     case ShapeType.TriMesh:
@@ -1314,7 +1396,7 @@ const geometryFromCollider = collider => {
       {
         const r = collider.shape.radius;
         const h = collider.shape.halfHeight;
-        const g = new CylinderBufferGeometry(r, r, h * 2);
+        const g = new CylinderGeometry(r, r, h * 2);
         return g;
       }
 
@@ -1322,7 +1404,7 @@ const geometryFromCollider = collider => {
       {
         const r = collider.shape.radius;
         const h = collider.shape.halfHeight;
-        const g = new CapsuleBufferGeometry(r, h * 2, 4, 8);
+        const g = new CapsuleGeometry(r, h * 2, 4, 8);
         return g;
       }
 
@@ -1330,7 +1412,7 @@ const geometryFromCollider = collider => {
       {
         const r = collider.shape.radius;
         const h = collider.shape.halfHeight;
-        const g = new ConeBufferGeometry(r, h * 2, 16);
+        const g = new ConeGeometry(r, h * 2, 16);
         return g;
       }
 
@@ -1350,7 +1432,7 @@ const geometryFromCollider = collider => {
       }
   }
 
-  return new BoxBufferGeometry(1, 1, 1);
+  return new BoxGeometry(1, 1, 1);
 };
 
 const DebugShape = /*#__PURE__*/memo(({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",
@@ -11,11 +11,16 @@
   "devDependencies": {
     "@react-three/drei": "^9.6.2",
     "@react-three/fiber": "^8.0.12",
+    "@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",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "three": "^0.139.2"
+    "three": "^0.139.2",
+    "vitest": "^0.23.4"
   },
   "peerDependencies": {
     "@react-three/fiber": "^8.0.12",
@@ -24,8 +29,8 @@
   },
   "dependencies": {
     "@dimforge/rapier3d-compat": "0.9.0",
-    "use-asset": "^1.0.4",
-    "three-stdlib": "^2.15.0"
+    "three-stdlib": "^2.15.0",
+    "use-asset": "^1.0.4"
   },
   "repository": "https://github.com/pmndrs/react-three-rapier/tree/master/packages/react-three-rapier"
 }

package/readme.md

@@ -9,6 +9,8 @@
 
 <p align="center">⚠️ Under heavy development. All APIs are subject to change. ⚠️</p>
 
+For contributions, please read the [contributing guide](https://github.com/pmndrs/react-three-rapier/blob/main/packages/react-three-rapier/CONTRIBUTING.md).
+
 ## Usage
 
 ```tsx
@@ -171,7 +173,7 @@ const Scene = () => {
       colliders="ball"
     >
       <instancedMesh args={[undefined, undefined, COUNT]}>
-        <sphereBufferGeometry args={[0.2]} />
+        <sphereGeometry args={[0.2]} />
         <meshPhysicalGeometry color="blue" />
 
         <CuboidCollider args={[0.1, 0.2, 0.1]} />