@react-three/rapier 0.10.0 → 0.11.1

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

@@ -109,6 +109,7 @@ interface RapierWorldProps {
     /**
      * The update priority at which the physics simulation should run.
      *
+     * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#taking-over-the-render-loop
      * @defaultValue undefined
      */
     updatePriority?: number;

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

@@ -8,3 +8,4 @@ export declare const rapierQuaternionToQuaternion: ({ x, y, z, w }: RapierQuater
 export declare const rigidBodyTypeFromString: (type: RigidBodyTypeString) => number;
 export declare const scaleVertices: (vertices: ArrayLike<number>, scale: Vector3) => number[];
 export declare const vectorToTuple: (v: Vector3 | Quaternion | any[] | undefined | number | Euler) => any[];
+export declare function useConst<T>(initialValue: T | (() => T)): T;

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

@@ -131,6 +131,17 @@ const vectorToTuple = v => {
 
   return [v];
 };
+function useConst(initialValue) {
+  const ref = React.useRef();
+
+  if (ref.current === undefined) {
+    ref.current = {
+      value: typeof initialValue === "function" ? initialValue() : initialValue
+    };
+  }
+
+  return ref.current.value;
+}
 
 const createRigidBodyApi = ref => {
   return {
@@ -580,7 +591,9 @@ const useColliderEvents = (collidersRef, props, events) => {
 
 const rigidBodyDescFromOptions = options => {
   const type = rigidBodyTypeFromString((options === null || options === void 0 ? void 0 : options.type) || "dynamic");
-  const desc = new rapier3dCompat.RigidBodyDesc(type);
+  const desc = new rapier3dCompat.RigidBodyDesc(type); // Apply immutable options
+
+  desc.canSleep = (options === null || options === void 0 ? void 0 : options.canSleep) || true;
   return desc;
 };
 const createRigidBodyState = ({
@@ -620,6 +633,12 @@ const mutableRigidBodyOptions = {
   enabledTranslations: (rb, [x, y, z]) => {
     rb.setEnabledTranslations(x, y, z, true);
   },
+  lockRotations: (rb, value) => {
+    rb.lockRotations(value, true);
+  },
+  lockTranslations: (rb, value) => {
+    rb.lockTranslations(value, true);
+  },
   angularVelocity: (rb, [x, y, z]) => {
     rb.setAngvel({
       x,
@@ -640,6 +659,11 @@ const mutableRigidBodyOptions = {
   userData: (rb, value) => {
     rb.userData = value;
   },
+
+  type(rb, value) {
+    rb.setBodyType(rigidBodyTypeFromString(value));
+  },
+
   position: () => {},
   rotation: () => {},
   quaternion: () => {},
@@ -1013,12 +1037,12 @@ const Physics = ({
 
     return worldRef.current;
   });
-  const [rigidBodyStates] = React.useState(() => new Map());
-  const [colliderStates] = React.useState(() => new Map());
-  const [rigidBodyEvents] = React.useState(() => new Map());
-  const [colliderEvents] = React.useState(() => new Map());
-  const [eventQueue] = React.useState(() => new rapier3dCompat.EventQueue(false));
-  const [attractorStates] = React.useState(() => new Map()); // Init world
+  const rigidBodyStates = useConst(() => new Map());
+  const colliderStates = useConst(() => new Map());
+  const rigidBodyEvents = useConst(() => new Map());
+  const colliderEvents = useConst(() => new Map());
+  const eventQueue = useConst(() => new rapier3dCompat.EventQueue(false));
+  const attractorStates = useConst(() => new Map()); // Init world
 
   React.useEffect(() => {
     const world = getWorldRef.current();

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

@@ -131,6 +131,17 @@ const vectorToTuple = v => {
 
   return [v];
 };
+function useConst(initialValue) {
+  const ref = React.useRef();
+
+  if (ref.current === undefined) {
+    ref.current = {
+      value: typeof initialValue === "function" ? initialValue() : initialValue
+    };
+  }
+
+  return ref.current.value;
+}
 
 const createRigidBodyApi = ref => {
   return {
@@ -580,7 +591,9 @@ const useColliderEvents = (collidersRef, props, events) => {
 
 const rigidBodyDescFromOptions = options => {
   const type = rigidBodyTypeFromString((options === null || options === void 0 ? void 0 : options.type) || "dynamic");
-  const desc = new rapier3dCompat.RigidBodyDesc(type);
+  const desc = new rapier3dCompat.RigidBodyDesc(type); // Apply immutable options
+
+  desc.canSleep = (options === null || options === void 0 ? void 0 : options.canSleep) || true;
   return desc;
 };
 const createRigidBodyState = ({
@@ -620,6 +633,12 @@ const mutableRigidBodyOptions = {
   enabledTranslations: (rb, [x, y, z]) => {
     rb.setEnabledTranslations(x, y, z, true);
   },
+  lockRotations: (rb, value) => {
+    rb.lockRotations(value, true);
+  },
+  lockTranslations: (rb, value) => {
+    rb.lockTranslations(value, true);
+  },
   angularVelocity: (rb, [x, y, z]) => {
     rb.setAngvel({
       x,
@@ -640,6 +659,11 @@ const mutableRigidBodyOptions = {
   userData: (rb, value) => {
     rb.userData = value;
   },
+
+  type(rb, value) {
+    rb.setBodyType(rigidBodyTypeFromString(value));
+  },
+
   position: () => {},
   rotation: () => {},
   quaternion: () => {},
@@ -1013,12 +1037,12 @@ const Physics = ({
 
     return worldRef.current;
   });
-  const [rigidBodyStates] = React.useState(() => new Map());
-  const [colliderStates] = React.useState(() => new Map());
-  const [rigidBodyEvents] = React.useState(() => new Map());
-  const [colliderEvents] = React.useState(() => new Map());
-  const [eventQueue] = React.useState(() => new rapier3dCompat.EventQueue(false));
-  const [attractorStates] = React.useState(() => new Map()); // Init world
+  const rigidBodyStates = useConst(() => new Map());
+  const colliderStates = useConst(() => new Map());
+  const rigidBodyEvents = useConst(() => new Map());
+  const colliderEvents = useConst(() => new Map());
+  const eventQueue = useConst(() => new rapier3dCompat.EventQueue(false));
+  const attractorStates = useConst(() => new Map()); // Init world
 
   React.useEffect(() => {
     const world = getWorldRef.current();

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

@@ -1,7 +1,7 @@
 import { ColliderDesc, ActiveEvents, RigidBodyDesc, EventQueue } from '@dimforge/rapier3d-compat';
 export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody } from '@dimforge/rapier3d-compat';
 import { useFrame, useThree } from '@react-three/fiber';
-import React, { useMemo, useEffect, useContext, useState, useRef, memo, createContext, useCallback, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
+import React, { useRef, useMemo, useEffect, useContext, useState, memo, createContext, useCallback, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
 import { Quaternion, Euler, Vector3, Object3D, Matrix4, MathUtils, InstancedMesh, BufferAttribute, DynamicDrawUsage } from 'three';
 import { useAsset } from 'use-asset';
 import { mergeVertices, VertexNormalsHelper } from 'three-stdlib';
@@ -106,6 +106,17 @@ const vectorToTuple = v => {
 
   return [v];
 };
+function useConst(initialValue) {
+  const ref = useRef();
+
+  if (ref.current === undefined) {
+    ref.current = {
+      value: typeof initialValue === "function" ? initialValue() : initialValue
+    };
+  }
+
+  return ref.current.value;
+}
 
 const createRigidBodyApi = ref => {
   return {
@@ -555,7 +566,9 @@ const useColliderEvents = (collidersRef, props, events) => {
 
 const rigidBodyDescFromOptions = options => {
   const type = rigidBodyTypeFromString((options === null || options === void 0 ? void 0 : options.type) || "dynamic");
-  const desc = new RigidBodyDesc(type);
+  const desc = new RigidBodyDesc(type); // Apply immutable options
+
+  desc.canSleep = (options === null || options === void 0 ? void 0 : options.canSleep) || true;
   return desc;
 };
 const createRigidBodyState = ({
@@ -595,6 +608,12 @@ const mutableRigidBodyOptions = {
   enabledTranslations: (rb, [x, y, z]) => {
     rb.setEnabledTranslations(x, y, z, true);
   },
+  lockRotations: (rb, value) => {
+    rb.lockRotations(value, true);
+  },
+  lockTranslations: (rb, value) => {
+    rb.lockTranslations(value, true);
+  },
   angularVelocity: (rb, [x, y, z]) => {
     rb.setAngvel({
       x,
@@ -615,6 +634,11 @@ const mutableRigidBodyOptions = {
   userData: (rb, value) => {
     rb.userData = value;
   },
+
+  type(rb, value) {
+    rb.setBodyType(rigidBodyTypeFromString(value));
+  },
+
   position: () => {},
   rotation: () => {},
   quaternion: () => {},
@@ -988,12 +1012,12 @@ const Physics = ({
 
     return worldRef.current;
   });
-  const [rigidBodyStates] = useState(() => new Map());
-  const [colliderStates] = useState(() => new Map());
-  const [rigidBodyEvents] = useState(() => new Map());
-  const [colliderEvents] = useState(() => new Map());
-  const [eventQueue] = useState(() => new EventQueue(false));
-  const [attractorStates] = useState(() => new Map()); // Init world
+  const rigidBodyStates = useConst(() => new Map());
+  const colliderStates = useConst(() => new Map());
+  const rigidBodyEvents = useConst(() => new Map());
+  const colliderEvents = useConst(() => new Map());
+  const eventQueue = useConst(() => new EventQueue(false));
+  const attractorStates = useConst(() => new Map()); // Init world
 
   useEffect(() => {
     const world = getWorldRef.current();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",
@@ -12,18 +12,18 @@
     "ts": "tsc -w"
   },
   "devDependencies": {
-    "@react-three/drei": "^9.34.1",
-    "@react-three/fiber": "^8.8.9",
+    "@react-three/drei": "9.45.0",
+    "@react-three/fiber": "8.9.1",
     "@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.24.1",
+    "@vitest/ui": "^0.25.2",
     "happy-dom": "^7.5.5",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "three": "^0.139.2",
-    "vitest": "^0.24.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "three": "0.146.0",
+    "vitest": "^0.25.2"
   },
   "peerDependencies": {
     "@react-three/fiber": "^8.0.12",
@@ -31,7 +31,7 @@
     "three": ">=0.139.2"
   },
   "dependencies": {
-    "@dimforge/rapier3d-compat": "0.9.0",
+    "@dimforge/rapier3d-compat": "0.10.0",
     "three-stdlib": "^2.15.0",
     "use-asset": "^1.0.4"
   },

package/readme.md

@@ -41,19 +41,51 @@ const App = () => {
 
 ## Readme Topics
 
-- [Automatic Colliders](#automatic-colliders)
+- [Basic Usage](#basic-usage)
+- [Readme Topics](#readme-topics)
+- [The Physics Component](#the-physics-component)
+- [Automatic colliders](#automatic-colliders)
+  - [Collider Examples](#collider-examples)
 - [Instanced Meshes](#instanced-meshes)
 - [Debug](#debug)
 - [Collision Events](#collision-events)
-- [Collision Groups](#configuring-collision-and-solver-groups)
-- [Contact Force Events](#contact-force-events)
+  - [Configuring collision and solver groups](#configuring-collision-and-solver-groups)
+- [Contact force events](#contact-force-events)
 - [Sensors](#sensors)
+  - [Sensors Example](#sensors-example)
 - [Attractors](#attractors)
-- [The timeStep](#configuring-time-step-size)
+  - [Attractors Example](#attractors-example)
+- [Configuring Time Step Size](#configuring-time-step-size)
 - [Manual stepping](#manual-stepping)
+- [Joints](#joints)
+  - [Joints Example](#joints-example)
 
 ---
 
+## The Physics Component
+The `<Physics />` component is the root component of your physics world. It is responsible for creating the physics world and managing the simulation. It relies on lazily initiating `Rapier` and needs to be wrapped in `<Suspense />`.
+
+```tsx
+  // The gravity of the physics workd
+  gravity?: Vector3Array; // default [0, -9.81, 0]
+
+  // Which collider shape to generate for meshes by default
+  colliders?: RigidBodyAutoCollider; // default "cuboid"
+
+  // The number of physics steps per second
+  timeStep?: number | "vary"; // default 1/60
+
+  // Pause the physic simulation
+  paused?: boolean; // default false
+
+  // Which order to run the physics simulation
+  updatePriority?: number;
+
+  // If the physics updates slower than the monitor refreshes,
+  // interpolation will smooth out the steps between frames
+  interpolate?: boolean; // default true
+```
+
 ## 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.
@@ -149,6 +181,10 @@ If part of our meshes are invisible and you want to include them in the collider
 </RigidBody>
 ```
 
+### Collider Examples
+<a href="https://codesandbox.io/s/react-three-rapier-auto-colliders-b4coz1"><img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/example-auto-colliders.jpg" width="240" /></a>
+<a href="https://codesandbox.io/s/react-three-rapier-compound-colliders-ol5ybn"><img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/example-compound-shapes.jpg" width="240" /></a>
+
 ## Instanced Meshes
 
 Instanced meshes can also be used and have automatic colliders generated from their mesh.
@@ -393,6 +429,9 @@ To detect when a collider enters or leaves another collider, you can use the `on
 </RigidBody>
 ```
 
+### Sensors Example
+<a href="https://codesandbox.io/s/react-three-rapier-sensors-byjmsk"><img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/example-sensors.jpg" width="240" /></a>
+
 ## Attractors
 
 An attractor simulates a source of gravity. Any `RigidBody` within range will be _pulled_ (attracted) toward the attractor.  
@@ -427,6 +466,9 @@ Gravity types:
   - `mass2` is the mass of the rigid-body at the time of calculation. Note that rigid-bodies with colliders will use the mass provided to the collider. This is not a value you can control from the attractor, only from wherever you're creating rigid-body components in the scene.
   - `distance` is the distance between the attractor and rigid-body at the time of calculation
 
+### Attractors Example
+<a href="https://codesandbox.io/s/react-three-rapier-attractors-oyj640"><img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/example-attractors.jpg" width="240" /></a>
+
 ## Configuring Time Step Size
 
 By default, `<Physics>` will simulate the physics world at a fixed rate of 60 frames per second. This can be changed by setting the `timeStep` prop on `<Physics>`:
@@ -455,4 +497,7 @@ step(1 / 60);
 
 ## Joints
 
-WIP
+- WIP
+
+### Joints Example
+<a href="https://codesandbox.io/s/react-three-rapier-sensors-byjmsk"><img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/example-joints.jpg" width="240" /></a>