Update to rapier-compat@0.14.0 (#705)

Co-authored-by: Alaric Baraou <alaric.baraou@gmail.com>
pmndrs · Oct 2, 2024 · 55fa8fe · 55fa8fe
1 parent 4d3a4c1
commit 55fa8fe
Show file tree

Hide file tree

Showing 44 changed files with 1,248 additions and 512 deletions.
diff --git a/.changeset/serious-lamps-play.md b/.changeset/serious-lamps-play.md
@@ -0,0 +1,9 @@
+---
+"@react-three/rapier": minor
+---
+
+Update @dimforge/rapier3d-compat to 0.14.0 (@wiledal)
+  - See https://github.com/dimforge/rapier.js/blob/master/CHANGELOG.md
+  - Changed World prop `erp` to `contactNaturalFrequency`
+    - This is undocumented in the Rapier.js documentation, but was introduced Rapier 0.20.0 https://github.com/dimforge/rapier/pull/651
+    - The change mentions `contactDampingRatio` but this is not exposed in the Rapier.js API as of yet
diff --git a/demo/package.json b/demo/package.json
@@ -10,20 +10,20 @@
   },
   "dependencies": {
     "@react-three/csg": "1.1.5",
-    "@react-three/drei": "9.74.14",
-    "@react-three/fiber": "8.9.1",
+    "@react-three/drei": "9.112.0",
+    "@react-three/fiber": "8.17.7",
     "@react-three/rapier": "1.4.0",
     "@react-three/rapier-addons": "4.0.1",
-    "@types/three": "^0.152.1",
-    "leva": "0.9.34",
-    "r3f-perf": "6.4.2",
+    "@types/three": "0.168.0",
+    "leva": "0.9.35",
+    "r3f-perf": "7.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.4.3",
-    "three": "0.146.0"
+    "three": "0.168.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "4.0.3",
+    "@vitejs/plugin-react": "4.3.1",
     "typescript": "4.6.3",
     "vite": "3.0.3"
   },

diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -8,6 +8,7 @@ import {
   Suspense,
   createContext,
   useContext,
+  useRef,
   useState
 } from "react";
 import { NavLink, NavLinkProps, Route, Routes } from "react-router-dom";
@@ -42,36 +43,19 @@ import { SpringExample } from "./examples/spring/SpringExample";
 import { StutteringExample } from "./examples/stuttering/StutteringExample";
 import { Transforms } from "./examples/transforms/TransformsExample";
 import { ActiveCollisionTypesExample } from "./examples/active-collision-types/ActiveCollisionTypesExample";
+import { OrbitControls as OrbitControlsImpl } from "three-stdlib";
+import { useResetOrbitControls } from "./hooks/use-reset-orbit-controls";
 
-const demoContext = createContext<{
-  setDebug?(f: boolean): void;
-  setPaused?(f: boolean): void;
-  setCameraEnabled?(f: boolean): void;
-}>({});
+type DemoContext = {
+  setDebug: (f: boolean) => void;
+  setPaused: (f: boolean) => void;
+  setCameraEnabled: (f: boolean) => void;
+  orbitControlRef: React.RefObject<OrbitControlsImpl>;
+};
 
-export const useDemo = () => useContext(demoContext);
+const demoContext = createContext<Partial<DemoContext>>({});
 
-const ToggleButton = ({
-  label,
-  value,
-  onClick
-}: {
-  label: string;
-  value: boolean;
-  onClick(): void;
-}) => (
-  <button
-    style={{
-      background: value ? "red" : "transparent",
-      border: "2px solid red",
-      color: value ? "white" : "red",
-      borderRadius: 4
-    }}
-    onClick={onClick}
-  >
-    {label}
-  </button>
-);
+export const useDemo = () => useContext(demoContext);
 
 export interface Demo {
   (props: { children?: ReactNode }): JSX.Element;
@@ -133,6 +117,9 @@ export const App = () => {
   const [interpolate, setInterpolate] = useState<boolean>(true);
   const [physicsKey, setPhysicsKey] = useState<number>(0);
   const [cameraEnabled, setCameraEnabled] = useState<boolean>(true);
+  const orbitControlRef = useRef<OrbitControlsImpl>(null);
+
+  useResetOrbitControls();
 
   const updatePhysicsKey = () => {
     setPhysicsKey((current) => current + 1);
@@ -143,10 +130,20 @@ export const App = () => {
       style={{
         position: "fixed",
         inset: 0,
-        background: "linear-gradient(blue, white)",
+        background: "linear-gradient(#aef, #ddd)",
+        backgroundRepeat: "repeat",
         fontFamily: "sans-serif"
       }}
     >
+      <div
+        style={{
+          position: "fixed",
+          inset: 0,
+          // background: "radial-gradient(#00000035 1px, transparent 0px)",
+          backgroundSize: "24px 24px",
+          backgroundRepeat: "repeat"
+        }}
+      />
       <Suspense fallback="Loading...">
         <Canvas shadows dpr={1}>
           <StrictMode>
@@ -169,13 +166,14 @@ export const App = () => {
               />
               <Environment preset="apartment" />
 
-              <OrbitControls enabled={cameraEnabled} />
+              <OrbitControls ref={orbitControlRef} enabled={cameraEnabled} />
 
               <demoContext.Provider
                 value={{
                   setDebug,
                   setPaused,
-                  setCameraEnabled
+                  setCameraEnabled,
+                  orbitControlRef
                 }}
               >
                 <Routes>
@@ -196,41 +194,58 @@ export const App = () => {
       <div
         style={{
           position: "absolute",
-          bottom: 24,
-          left: 24,
-          display: "flex",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: 240,
+          display: "block",
           flexWrap: "wrap",
-          gap: 12,
-          maxWidth: 600
+          overflow: "auto",
+          padding: 20,
+          background: "linear-gradient(to right, #fffa, #fffa)"
         }}
       >
+        <h1
+          style={{
+            fontSize: 24
+          }}
+        >
+          r3/rapier demos
+        </h1>
+
+        <div>
+          <ToggleButton
+            label="Debug"
+            value={debug}
+            onClick={() => setDebug((v) => !v)}
+          />
+          <ToggleButton
+            label="Perf"
+            value={perf}
+            onClick={() => setPerf((v) => !v)}
+          />
+          <ToggleButton
+            label="Paused"
+            value={paused}
+            onClick={() => setPaused((v) => !v)}
+          />
+          <ToggleButton
+            label="Interpolate"
+            value={interpolate}
+            onClick={() => setInterpolate((v) => !v)}
+          />
+          <ToggleButton
+            label="Reset"
+            value={false}
+            onClick={updatePhysicsKey}
+          />
+        </div>
+
         {Object.keys(routes).map((key) => (
           <Link key={key} to={key} end>
             {key.replace(/-/g, " ") || "Plinko"}
           </Link>
         ))}
-
-        <ToggleButton
-          label="Debug"
-          value={debug}
-          onClick={() => setDebug((v) => !v)}
-        />
-        <ToggleButton
-          label="Perf"
-          value={perf}
-          onClick={() => setPerf((v) => !v)}
-        />
-        <ToggleButton
-          label="Paused"
-          value={paused}
-          onClick={() => setPaused((v) => !v)}
-        />
-        <ToggleButton
-          label="Interpolate"
-          value={interpolate}
-          onClick={() => setInterpolate((v) => !v)}
-        />
-        <ToggleButton label="Reset" value={false} onClick={updatePhysicsKey} />
       </div>
     </div>
   );
@@ -241,7 +256,9 @@ const Link = (props: NavLinkProps) => {
     <NavLink
       {...props}
       style={({ isActive }) => ({
+        display: "inline-block",
         border: "2px solid blue",
+        margin: 4,
         textTransform: "capitalize",
         borderRadius: 4,
         padding: 4,
@@ -252,3 +269,26 @@ const Link = (props: NavLinkProps) => {
     />
   );
 };
+
+const ToggleButton = ({
+  label,
+  value,
+  onClick
+}: {
+  label: string;
+  value: boolean;
+  onClick(): void;
+}) => (
+  <button
+    style={{
+      background: value ? "red" : "transparent",
+      border: "2px solid red",
+      color: value ? "white" : "red",
+      borderRadius: 4,
+      margin: 4
+    }}
+    onClick={onClick}
+  >
+    {label}
+  </button>
+);
diff --git a/demo/src/examples/active-collision-types/ActiveCollisionTypesExample.tsx b/demo/src/examples/active-collision-types/ActiveCollisionTypesExample.tsx
@@ -3,6 +3,7 @@ import { Box, Sphere } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
 import { RapierRigidBody, RigidBody } from "@react-three/rapier";
 import { useRef, useState } from "react";
+import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
 const activeCollisionTypes =
   ActiveCollisionTypes.DEFAULT | ActiveCollisionTypes.KINEMATIC_FIXED;
@@ -48,6 +49,8 @@ const Wall = () => {
 };
 
 export const ActiveCollisionTypesExample = () => {
+  useResetOrbitControls(10);
+
   return (
     <group>
       <Ball />

diff --git a/demo/src/examples/all-colliders/AllCollidersExample.tsx b/demo/src/examples/all-colliders/AllCollidersExample.tsx
@@ -19,6 +19,7 @@ import { useSuzanne } from "../all-shapes/AllShapesExample";
 import { RoundedBoxGeometry } from "three-stdlib";
 import { PlaneGeometry } from "three";
 import { useEffect, useRef } from "react";
+import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
 const CuteBox = (props: Omit<MeshProps, "args">) => (
   <Box castShadow receiveShadow {...props}>
@@ -64,8 +65,7 @@ const heightFieldGeometry = new PlaneGeometry(
 );
 
 heightField.forEach((v, index) => {
-  (heightFieldGeometry.attributes.position.array as number[])[index * 3 + 2] =
-    v;
+  heightFieldGeometry.attributes.position.array[index * 3 + 2] = v;
 });
 heightFieldGeometry.scale(1, -1, 1);
 heightFieldGeometry.rotateX(-Math.PI / 2);
@@ -82,6 +82,8 @@ export const AllCollidersExample = () => {
     console.log("roundCuboidCollider", roundCuboidCollider.current);
   }, []);
 
+  useResetOrbitControls(30);
+
   return (
     <group>
       <RigidBody colliders={false}>

diff --git a/demo/src/examples/all-shapes/AllShapesExample.tsx b/demo/src/examples/all-shapes/AllShapesExample.tsx
@@ -12,6 +12,7 @@ import {
 
 import { Demo } from "../../App";
 import { Mesh } from "three";
+import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
 export const useSuzanne = () => {
   // @ts-ignore
@@ -61,6 +62,7 @@ const OffsetTorus = () => {
 
 export const AllShapesExample: Demo = () => {
   const { nodes } = useSuzanne();
+  useResetOrbitControls();
 
   return (
     <>

diff --git a/demo/src/examples/api-usage/ApiUsageExample.tsx b/demo/src/examples/api-usage/ApiUsageExample.tsx
@@ -2,10 +2,13 @@ import { Torus } from "@react-three/drei";
 import { RigidBody, RapierRigidBody } from "@react-three/rapier";
 import { useEffect, useRef } from "react";
 import { Demo } from "../../App";
+import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
 export const ApiUsage: Demo = () => {
   const torus = useRef<RapierRigidBody>(null);
 
+  useResetOrbitControls();
+
   useEffect(() => {
     if (torus.current) {
       torus.current.applyTorqueImpulse(

diff --git a/demo/src/examples/attractors/AttractorsExample.tsx b/demo/src/examples/attractors/AttractorsExample.tsx
@@ -9,12 +9,15 @@ import { RapierRigidBody } from "@react-three/rapier";
 import { createRef, useEffect, useRef } from "react";
 import { Demo } from "../../App";
 import { Attractor } from "@react-three/rapier-addons";
+import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
 const BALLS = 100;
 
 export const AttractorExample: Demo = () => {
   const api = useRef<RapierRigidBody[]>(null);
 
+  useResetOrbitControls(40);
+
   return (
     <group>
       <InstancedRigidBodies

diff --git a/demo/src/examples/car/CarExample.tsx b/demo/src/examples/car/CarExample.tsx
@@ -8,6 +8,7 @@ import {
 } from "@react-three/rapier";
 import { createRef, RefObject, useRef } from "react";
 import { Demo } from "../../App";
+import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
 const WheelJoint = ({
   body,
@@ -49,6 +50,8 @@ export const Car: Demo = () => {
     wheelPositions.map(() => createRef<RapierRigidBody>())
   );
 
+  useResetOrbitControls(30);
+
   return (
     <group>
       <RigidBody colliders="cuboid" ref={bodyRef} type="dynamic">

diff --git a/demo/src/examples/cluster/ClusterExample.tsx b/demo/src/examples/cluster/ClusterExample.tsx
@@ -8,12 +8,15 @@ import {
 import { useEffect, useRef } from "react";
 import { Color, InstancedMesh } from "three";
 import { Demo } from "../../App";
+import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
 const BALLS = 1000;
 
 export const Cluster: Demo = () => {
   const api = useRef<RapierRigidBody[]>(null);
 
+  useResetOrbitControls();
+
   const { isPaused } = useRapier();
 
   const ref = useRef<InstancedMesh>(null);