@react-three/rapier 0.3.0 → 0.4.1

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useLayoutEffect, useMemo, createContext, useContext, useEffect, forwardRef, useImperativeHandle, memo } from 'react';
+import React, { useRef, useState, useEffect, useMemo, createContext, useContext, forwardRef, useImperativeHandle, memo } from 'react';
 import { useAsset } from 'use-asset';
 import { useFrame } from '@react-three/fiber';
 import { ColliderDesc, CoefficientCombineRule, ActiveEvents, EventQueue, ShapeType } from '@dimforge/rapier3d-compat';
@@ -38,7 +38,7 @@ const scaleColliderArgs = (shape, args, scale) => {
   const scaleArray = [scale.x, scale.y, scale.z];
   return newArgs.map((arg, index) => scaleArray[index] * arg);
 };
-const createColliderFromOptions = (options, world, rigidBodyHandle, scale = {
+const createColliderFromOptions = (options, world, rigidBody, scale = {
   x: 1,
   y: 1,
   z: 1
@@ -85,7 +85,7 @@ const createColliderFromOptions = (options, world, rigidBodyHandle, scale = {
     });
   }
 
-  const collider = world.createCollider(colliderDesc, rigidBodyHandle);
+  const collider = world.createCollider(colliderDesc, rigidBody);
   return collider;
 };
 const createCollidersFromChildren = (object, rigidBody, type, world, hasCollisionEvents = false) => {
@@ -166,7 +166,7 @@ const createCollidersFromChildren = (object, rigidBody, type, world, hasCollisio
         desc.setActiveEvents(ActiveEvents.COLLISION_EVENTS);
       }
 
-      const collider = world.createCollider(desc, rigidBody.handle);
+      const collider = world.createCollider(desc, rigidBody);
       colliders.push(collider);
     }
   });
@@ -184,7 +184,47 @@ const scaleVertices = (vertices, scale) => {
   return scaledVerts;
 };
 
-// TODO: Flesh this out
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
 const createRigidBodyApi = ref => {
   return {
     raw: () => ref.current(),
@@ -193,30 +233,21 @@ const createRigidBodyApi = ref => {
       return ref.current().handle;
     },
 
-    applyImpulse({
-      x,
-      y,
-      z
-    }) {
-      ref.current().applyImpulse({
-        x,
-        y,
-        z
-      }, true);
+    mass: () => ref.current().mass(),
+
+    applyImpulse(impulseVector) {
+      ref.current().applyImpulse(impulseVector, true);
     },
 
-    applyTorqueImpulse({
-      x,
-      y,
-      z
-    }) {
-      ref.current().applyTorqueImpulse({
-        x,
-        y,
-        z
-      }, true);
+    applyTorqueImpulse(torqueVector) {
+      ref.current().applyTorqueImpulse(torqueVector, true);
     },
 
+    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),
+
     translation() {
       const {
         x,
@@ -226,6 +257,8 @@ const createRigidBodyApi = ref => {
       return new Vector3(x, y, z);
     },
 
+    setTranslation: translation => ref.current().setTranslation(translation, true),
+
     rotation() {
       const {
         x,
@@ -234,8 +267,39 @@ const createRigidBodyApi = ref => {
         w
       } = ref.current().rotation();
       return new Quaternion(x, y, z, w);
-    }
+    },
 
+    setRotation: rotation => ref.current().setRotation(_objectSpread2(_objectSpread2({}, rotation), {}, {
+      w: 1
+    }), true),
+
+    linvel() {
+      const {
+        x,
+        y,
+        z
+      } = ref.current().linvel();
+      return new Vector3(x, y, z);
+    },
+
+    setLinvel: velocity => ref.current().setLinvel(velocity, true),
+
+    angvel() {
+      const {
+        x,
+        y,
+        z
+      } = ref.current().angvel();
+      return new Vector3(x, y, z);
+    },
+
+    setAngvel: velocity => ref.current().setAngvel(velocity, true),
+    setNextKinematicRotation: rotation => ref.current().setNextKinematicRotation(_objectSpread2(_objectSpread2({}, rotation), {}, {
+      w: 1
+    })),
+    setNextKinematicTranslation: translation => ref.current().setNextKinematicTranslation(translation),
+    resetForces: () => ref.current().resetForces(true),
+    resetTorques: () => ref.current().resetTorques(true)
   };
 }; // TODO: Flesh this out
 
@@ -255,10 +319,10 @@ const createWorldApi = ref => {
     getCollider: handle => ref.current().getCollider(handle),
     getRigidBody: handle => ref.current().getRigidBody(handle),
     createRigidBody: desc => ref.current().createRigidBody(desc),
-    createCollider: (desc, rigidBodyHandle) => ref.current().createCollider(desc, rigidBodyHandle),
+    createCollider: (desc, rigidBody) => ref.current().createCollider(desc, rigidBody),
     removeRigidBody: rigidBody => ref.current().removeRigidBody(rigidBody),
     removeCollider: collider => ref.current().removeCollider(collider, true),
-    createImpulseJoint: (params, rigidBodyA, rigidBodyB) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB),
+    createImpulseJoint: (params, rigidBodyA, rigidBodyB) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB, true),
     removeImpulseJoint: joint => ref.current().removeImpulseJoint(joint, true),
     forEachCollider: callback => ref.current().forEachCollider(callback)
   };
@@ -305,7 +369,7 @@ const Physics = ({
   const [rigidBodyEvents] = useState(() => new Map());
   const [eventQueue] = useState(() => new EventQueue(false)); // Init world
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const world = getWorldRef.current();
     return () => {
       if (world) {
@@ -374,10 +438,12 @@ const Physics = ({
     }); // Collision events
 
     eventQueue.drainCollisionEvents((handle1, handle2, started) => {
+      var _collider1$parent, _collider2$parent;
+
       const collider1 = world.getCollider(handle1);
       const collider2 = world.getCollider(handle2);
-      const rigidBodyHandle1 = collider1.parent();
-      const rigidBodyHandle2 = collider2.parent();
+      const rigidBodyHandle1 = (_collider1$parent = collider1.parent()) === null || _collider1$parent === void 0 ? void 0 : _collider1$parent.handle;
+      const rigidBodyHandle2 = (_collider2$parent = collider2.parent()) === null || _collider2$parent === void 0 ? void 0 : _collider2$parent.handle;
 
       if (!collider1 || !collider2 || !rigidBodyHandle1 || !rigidBodyHandle2) {
         return;
@@ -389,7 +455,7 @@ const Physics = ({
       const events2 = rigidBodyEvents.get(rigidBodyHandle2);
 
       if (started) {
-        world.contactPair(handle1, handle2, (manifold, flipped) => {
+        world.contactPair(collider1, collider2, (manifold, flipped) => {
           var _events1$onCollisionE, _events2$onCollisionE;
 
           events1 === null || events1 === void 0 ? void 0 : (_events1$onCollisionE = events1.onCollisionEnter) === null || _events1$onCollisionE === void 0 ? void 0 : _events1$onCollisionE.call(events1, {
@@ -433,47 +499,6 @@ const Physics = ({
   }, children);
 };
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
 const useRapier = () => {
   return useContext(RapierContext);
 };
@@ -504,7 +529,7 @@ const useRigidBody = (options = {}) => {
         z: avz
       }).setGravityScale(gravityScale).setCanSleep(canSleep).setCcdEnabled(ccdEnabled);
       const rigidBody = world.createRigidBody(desc);
-      rigidBodyRef.current = rigidBody;
+      rigidBodyRef.current = world.getRigidBody(rigidBody.handle);
     }
 
     return rigidBodyRef.current;
@@ -555,8 +580,8 @@ const useRigidBody = (options = {}) => {
     rigidBody.wakeUp();
     rigidBodyMeshes.set(rigidBody.handle, ref.current);
     return () => {
-      autoColliders.forEach(collider => world.removeCollider(collider));
       world.removeRigidBody(rigidBody);
+      autoColliders.forEach(collider => world.removeCollider(collider));
       rigidBodyRef.current = undefined;
       rigidBodyMeshes.delete(rigidBody.handle);
     };
@@ -585,7 +610,7 @@ const useCollider = (body, options = {}) => {
   const objectRef = useRef();
   const getColliderRef = useRef(() => {
     if (!colliderRef.current) {
-      colliderRef.current = createColliderFromOptions(options, world, body.handle);
+      colliderRef.current = createColliderFromOptions(options, world, world.getRigidBody(body.handle));
     }
 
     return colliderRef.current;
@@ -611,7 +636,7 @@ const useRigidBodyWithCollider = (rigidBodyOptions, colliderOptions) => {
     }
 
     const scale = ref.current.getWorldScale(new Vector3());
-    const collider = createColliderFromOptions(colliderOptions, world, rigidBody.handle, scale);
+    const collider = createColliderFromOptions(colliderOptions, world, world.getRigidBody(rigidBody.handle), scale);
     return () => {
       world.removeCollider(collider);
     };
@@ -767,7 +792,6 @@ const useImpulseJoint = (body1, body2, params) => {
     const joint = getJointRef.current();
     return () => {
       if (joint) {
-        console.log('remove joint', joint);
         world.removeImpulseJoint(joint);
         jointRef.current = undefined;
       }
@@ -918,7 +942,7 @@ const AnyCollider = _ref2 => {
   const ref = useRef(null);
   useEffect(() => {
     const scale = ref.current.getWorldScale(new Vector3());
-    const collider = createColliderFromOptions(props, world, rigidBody.handle, scale, hasCollisionEvents);
+    const collider = createColliderFromOptions(props, world, rigidBody.raw(), scale, hasCollisionEvents);
     return () => {
       world.removeCollider(collider);
     };
@@ -975,20 +999,20 @@ const ConvexHullCollider = props => {
 };
 
 const geometryFromCollider = collider => {
-  switch (collider.shapeType()) {
+  switch (collider.shape.type) {
     case ShapeType.Cuboid:
       {
         const {
           x,
           y,
           z
-        } = collider.halfExtents();
+        } = collider.shape.halfExtents;
         return new BoxBufferGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
       }
 
     case ShapeType.Ball:
       {
-        const r = collider.radius();
+        const r = collider.shape.radius;
         return new SphereBufferGeometry(r + +0.01, 8, 8);
       }
 
@@ -996,10 +1020,12 @@ const geometryFromCollider = collider => {
       {
         var _g$index;
 
-        const v = collider.vertices();
-        const i = collider.indices();
-        const g = new BufferGeometry();
-        g.setAttribute("position", new BufferAttribute(v, 3));
+        const v = collider.shape.vertices;
+        const i = collider.shape.indices;
+        const g = new BufferGeometry(); // Vertices are not always a float3darray (???), so we need to convert them
+
+        const safeVerts = Float32Array.from(v);
+        g.setAttribute("position", new BufferAttribute(safeVerts, 3));
         (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.set(i);
         g.setDrawRange(0, g.attributes.position.array.length / 3 - 1);
         return g;
@@ -1007,16 +1033,18 @@ const geometryFromCollider = collider => {
 
     case ShapeType.ConvexPolyhedron:
       {
-        const cv = collider.vertices();
+        const cv = collider.shape.vertices; // Vertices are not always a float3darray (???), so we need to convert them
+
+        const safeVerts = Float32Array.from(cv);
         const cg = new BufferGeometry();
-        cg.setAttribute("position", new BufferAttribute(cv, 3));
+        cg.setAttribute("position", new BufferAttribute(safeVerts, 3));
         return cg;
       }
 
     case ShapeType.Cylinder:
       {
-        const r = collider.radius();
-        const h = collider.halfHeight();
+        const r = collider.shape.radius;
+        const h = collider.shape.halfHeight;
         const g = new CylinderBufferGeometry(r, r, h);
         return g;
       }

package/package.json

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

package/readme.md

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