fix(deps): update deps, refactor examples (#189)

* fix(deps): update deps, refactor examples

- add`type` setting to mutable props
- use `canSleep` on immutable RigidBodyDesc creation

* feat: add dynamic type example

* fix(dynamic example): a bit more robust

.changeset/moody-radios-visit.md

@@ -0,0 +1,5 @@
+---
+"@react-three/rapier": patch
+---
+
+Fix issue with `canSleep` missing from RigidBodyDesc

.changeset/olive-lemons-smoke.md

@@ -0,0 +1,5 @@
+---
+"@react-three/rapier": patch
+---
+
+Enable dynamic changing of RigidBody `type`

demo/package.json

@@ -9,15 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@react-three/drei": "^9.34.1",
-    "@react-three/fiber": "^8.8.9",
+    "@react-three/csg": "1.1.5",
+    "@react-three/drei": "9.45.0",
+    "@react-three/fiber": "8.9.1",
     "@react-three/rapier": "*",
-    "leva": "^0.9.34",
-    "r3f-perf": "^6.4.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-router-dom": "^6.3.0",
-    "three": "^0.139.2"
+    "leva": "0.9.34",
+    "r3f-perf": "6.4.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.4.3",
+    "three": "0.146.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.1.0",

demo/src/App.tsx

@@ -12,32 +12,35 @@ import {
   useEffect
 } from "react";
 import { NavLink, NavLinkProps, Route, Routes } from "react-router-dom";
-import { AllCollidersExample } from "./all-colliders/AllCollidersExample";
-import { AllShapesExample } from "./all-shapes/AllShapesExample";
-import { ApiUsage } from "./api-usage/ApiUsageExample";
-import { AttractorExample } from "./attractors/AttractorsExample";
-import { Car } from "./car/CarExample";
-import { Cluster } from "./cluster/ClusterExample";
-import { Colliders } from "./colliders/CollidersExample";
-import { CollisionEventsExample } from "./collision-events/CollisionEventsExample";
-import { ComponentsExample } from "./components/ComponentsExample";
-import { ContactForceEventsExample } from "./contact-force-events/ContactForceEventsExample";
-import { CradleExample } from "./cradle/CradleExample";
-import { Damping } from "./damping/DampingExample";
-import { InstancedMeshes } from "./instanced-meshes/InstancedMeshesExample";
-import { InstancedMeshesCompound } from "./instances-meshes-compound/InstancedMeshesCompoundExample";
-import { Joints } from "./joints/JointsExample";
-import { Kinematics } from "./kinematics/KinematicsExample";
-import { ManualStepExample } from "./manual-step/ManualStepExamples";
-import { MeshColliderTest } from "./mesh-collider-test/MeshColliderExample";
-import { SensorsExample } from "./sensors/SensorsExample";
-import Shapes from "./shapes/ShapesExample";
-import { Transforms } from "./transforms/TransformsExample";
-import { LockedTransformsExample } from "./locked-transforms/LockedTransformsExample";
+import { AllCollidersExample } from "./examples/all-colliders/AllCollidersExample";
+import { AllShapesExample } from "./examples/all-shapes/AllShapesExample";
+import { ApiUsage } from "./examples/api-usage/ApiUsageExample";
+import { AttractorExample } from "./examples/attractors/AttractorsExample";
+import { Car } from "./examples/car/CarExample";
+import { Cluster } from "./examples/cluster/ClusterExample";
+import { Colliders } from "./examples/colliders/CollidersExample";
+import { CollisionEventsExample } from "./examples/collision-events/CollisionEventsExample";
+import { ComponentsExample } from "./examples/components/ComponentsExample";
+import { ContactForceEventsExample } from "./examples/contact-force-events/ContactForceEventsExample";
+import { CradleExample } from "./examples/cradle/CradleExample";
+import { Damping } from "./examples/damping/DampingExample";
+import { InstancedMeshes } from "./examples/instanced-meshes/InstancedMeshesExample";
+import { InstancedMeshesCompound } from "./examples/instances-meshes-compound/InstancedMeshesCompoundExample";
+import { Joints } from "./examples/joints/JointsExample";
+import { Kinematics } from "./examples/kinematics/KinematicsExample";
+import { ManualStepExample } from "./examples/manual-step/ManualStepExamples";
+import { MeshColliderTest } from "./examples/mesh-collider-test/MeshColliderExample";
+import { SensorsExample } from "./examples/sensors/SensorsExample";
+import Shapes from "./examples/plinko/ShapesExample";
+import { Transforms } from "./examples/transforms/TransformsExample";
+import { LockedTransformsExample } from "./examples/locked-transforms/LockedTransformsExample";
+import { PerformanceExample } from "./examples/performance/PeformanceExample";
+import { DynamicTypeChangeExample } from "./examples/dynamic-type-change/DynamicTypeChangeExample";
 
 const demoContext = createContext<{
   setDebug?(f: boolean): void;
   setPaused?(f: boolean): void;
+  setCameraEnabled?(f: boolean): void;
 }>({});
 
 export const useDemo = () => useContext(demoContext);
@@ -105,14 +108,17 @@ const routes: Record<string, ReactNode> = {
   "contact-force-events": <ContactForceEventsExample />,
   sensors: <SensorsExample />,
   "manual-step": <ManualStepExample />,
-  "locked-transforms": <LockedTransformsExample />
+  "locked-transforms": <LockedTransformsExample />,
+  performance: <PerformanceExample />,
+  "dynamic-type-changes": <DynamicTypeChangeExample />
 };
 
 export const App = () => {
   const [debug, setDebug] = useState<boolean>(false);
   const [perf, setPerf] = useState<boolean>(false);
   const [paused, setPaused] = useState<boolean>(false);
   const [physicsKey, setPhysicsKey] = useState<number>(0);
+  const [cameraEnabled, setCameraEnabled] = useState<boolean>(true);
 
   const updatePhysicsKey = () => {
     setPhysicsKey((current) => current + 1);
@@ -142,12 +148,14 @@ export const App = () => {
                 shadow-bias={-0.0001}
               />
               <Environment preset="apartment" />
-              <OrbitControls />
+
+              <OrbitControls enabled={cameraEnabled} />
 
               <demoContext.Provider
                 value={{
                   setDebug,
-                  setPaused
+                  setPaused,
+                  setCameraEnabled
                 }}
               >
                 <Routes>
@@ -179,7 +187,7 @@ export const App = () => {
       >
         {Object.keys(routes).map((key) => (
           <Link key={key} to={key} end>
-            {key.replace(/-/g, " ") || "Shapes"}
+            {key.replace(/-/g, " ") || "Plinko"}
           </Link>
         ))}
 

demo/src/all-shapes/AllShapesExample.tsx → demo/src/examples/all-shapes/AllShapesExample.tsx

@@ -11,12 +11,14 @@ import {
   TrimeshCollider
 } from "@react-three/rapier";
 
-import { Demo } from "../App";
+import { Demo } from "../../App";
 import { Mesh } from "three";
 
 export const useSuzanne = () => {
   // @ts-ignore
-  return useGLTF(new URL("./susanne.glb", import.meta.url).toString()) as {
+  return useGLTF(
+    new URL("../../models/susanne.glb", import.meta.url).toString()
+  ) as {
     nodes: {
       Suzanne: Mesh;
     };
@@ -25,7 +27,9 @@ export const useSuzanne = () => {
 
 const useOffsetTorus = () => {
   // @ts-ignore
-  return useGLTF(new URL("./offset-torus.glb", import.meta.url).toString()) as {
+  return useGLTF(
+    new URL("../../models/offset-torus.glb", import.meta.url).toString()
+  ) as {
     nodes: {
       Torus: Mesh;
     };

demo/src/api-usage/ApiUsageExample.tsx → demo/src/examples/api-usage/ApiUsageExample.tsx

@@ -1,7 +1,7 @@
 import { Torus } from "@react-three/drei";
 import { RigidBody, RigidBodyApi } from "@react-three/rapier";
 import { useEffect, useRef } from "react";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 export const ApiUsage: Demo = () => {
   const torus = useRef<RigidBodyApi>(null);

demo/src/attractors/AttractorsExample.tsx → demo/src/examples/attractors/AttractorsExample.tsx

@@ -8,7 +8,7 @@ import {
   RigidBody
 } from "@react-three/rapier";
 import { createRef, useEffect, useRef } from "react";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 const BALLS = 100;
 

demo/src/car/CarExample.tsx → demo/src/examples/car/CarExample.tsx

@@ -9,7 +9,7 @@ import {
   Vector3Array
 } from "@react-three/rapier";
 import { createRef, useRef } from "react";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 const WheelJoint = ({
   body,

demo/src/cluster/ClusterExample.tsx → demo/src/examples/cluster/ClusterExample.tsx

@@ -6,7 +6,7 @@ import {
   useRapier
 } from "@react-three/rapier";
 import { createRef, useEffect, useRef } from "react";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 const BALLS = 1000;
 

demo/src/colliders/CollidersExample.tsx → demo/src/examples/colliders/CollidersExample.tsx

@@ -8,7 +8,7 @@ import {
 } from "@react-three/rapier";
 import { useRef } from "react";
 import { Euler, Vector3 } from "three";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 const Ball = () => {
   const ball = useRef<RigidBodyApi>(null);

demo/src/components/ComponentsExample.tsx → demo/src/examples/components/ComponentsExample.tsx

@@ -4,12 +4,12 @@ import { Box, Clone, Sphere, useGLTF } from "@react-three/drei";
 import { RigidBody, TrimeshCollider } from "@react-three/rapier";
 import { GroupProps, Object3DNode, useFrame } from "@react-three/fiber";
 import { Mesh } from "three";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 const Map = () => {
   const { nodes } = useGLTF(
     // @ts-ignore
-    new URL("../map.glb", import.meta.url).toString()
+    new URL("../../models/map.glb", import.meta.url).toString()
   ) as unknown as { nodes: { map: Mesh } };
 
   nodes.map.castShadow = true;
@@ -32,7 +32,7 @@ const Map = () => {
 
 const Pear = (props: GroupProps) => {
   const { nodes } = useGLTF(
-    new URL("../shapes/objects.glb", import.meta.url).toString()
+    new URL("../../models/objects.glb", import.meta.url).toString()
   ) as unknown as {
     nodes: {
       pear: Mesh;

demo/src/contact-force-events/ContactForceEventsExample.tsx → demo/src/examples/contact-force-events/ContactForceEventsExample.tsx

@@ -3,7 +3,7 @@ import { MeshPhysicalMaterialProps } from "@react-three/fiber";
 import { RigidBody, RigidBodyApi, RigidBodyProps } from "@react-three/rapier";
 import { useRef, useState } from "react";
 import { Color } from "three";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 type BallProps = { onContactForce: RigidBodyProps["onContactForce"] };
 const Ball = ({ onContactForce }: BallProps) => {

demo/src/cradle/CradleExample.tsx → demo/src/examples/cradle/CradleExample.tsx

@@ -9,7 +9,7 @@ import {
   useSphericalJoint
 } from "@react-three/rapier";
 import { useRef } from "react";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 const Rod = (props: UseRigidBodyOptions) => {
   const anchor = useRef<RigidBodyApi>(null);

demo/src/damping/DampingExample.tsx → demo/src/examples/damping/DampingExample.tsx

@@ -1,7 +1,7 @@
 import { Box, Sphere, useTexture } from "@react-three/drei";
 import { RigidBody } from "@react-three/rapier";
 import { RepeatWrapping } from "three";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 export const Damping: Demo = () => {
   const floor = useTexture(new URL("./white.png", import.meta.url).toString());

demo/src/examples/dynamic-type-change/DynamicTypeChangeExample.tsx

@@ -0,0 +1,96 @@
+import { Html } from "@react-three/drei";
+import { useFrame, useThree } from "@react-three/fiber";
+import { RigidBody, RigidBodyApi } from "@react-three/rapier";
+import { useEffect, useRef, useState } from "react";
+import { useDemo } from "../../App";
+import { useSuzanne } from "../all-shapes/AllShapesExample";
+
+export const DynamicTypeChangeExample = () => {
+  const { setCameraEnabled } = useDemo();
+  const monkee = useRef<RigidBodyApi>(null);
+  const [dragging, setDragging] = useState(false);
+  const [s] = useState<{ mouse: { x: number; y: number } | null }>({
+    mouse: null
+  });
+
+  const {
+    nodes: { Suzanne }
+  } = useSuzanne();
+
+  const { mouse } = useThree();
+
+  useEffect(() => {
+    if (dragging) {
+      document.body.style.cursor = "grabbing";
+      setCameraEnabled?.(false);
+    } else {
+      document.body.style.cursor = "";
+      setCameraEnabled?.(true);
+      s.mouse = null;
+    }
+  }, [dragging]);
+
+  useFrame(() => {
+    if (dragging) {
+      if (!s.mouse) {
+        s.mouse = { x: mouse.x, y: mouse.y };
+      } else {
+        const { x, y } = monkee.current?.translation() || { x: 0, y: 0 };
+
+        monkee.current?.setTranslation({
+          x: x + (mouse.x - s.mouse.x) * 10,
+          y: y + (mouse.y - s.mouse.y) * 10,
+          z: 0
+        });
+
+        s.mouse = { x: mouse.x, y: mouse.y };
+      }
+    }
+  });
+
+  useEffect(() => {
+    const handleMouseUp = () => {
+      setDragging(false);
+    };
+    window.addEventListener("pointerup", handleMouseUp);
+
+    return () => {
+      window.removeEventListener("pointerup", handleMouseUp);
+    };
+  }, []);
+
+  return (
+    <group>
+      <RigidBody type={dragging ? "kinematicPosition" : "dynamic"} ref={monkee}>
+        <mesh
+          castShadow
+          receiveShadow
+          geometry={Suzanne.geometry}
+          onPointerDown={() => {
+            setDragging(true);
+          }}
+          onPointerOver={() => (document.body.style.cursor = "grab")}
+          onPointerOut={() => (document.body.style.cursor = "")}
+        >
+          <meshStandardMaterial color="yellow" />
+          <Html
+            style={{
+              pointerEvents: "none",
+              width: 200,
+              marginLeft: -100,
+              marginTop: -100,
+              borderRadius: 4,
+              background: "rgba(255,255,255,.2)",
+              padding: 8,
+              textAlign: "center",
+              backdropFilter: "blur(10px)"
+            }}
+          >
+            <div>Drag me!</div>
+            <div>Type: {dragging ? "kinematicPosition" : "dynamic"}</div>
+          </Html>
+        </mesh>
+      </RigidBody>
+    </group>
+  );
+};

demo/src/instanced-meshes/InstancedMeshesExample.tsx → demo/src/examples/instanced-meshes/InstancedMeshesExample.tsx

@@ -13,7 +13,7 @@ import {
   Vector3
 } from "three";
 import { useSuzanne } from "../all-shapes/AllShapesExample";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 const COUNT = 300;
 

demo/src/instances-meshes-compound/InstancedMeshesCompoundExample.tsx → demo/src/examples/instances-meshes-compound/InstancedMeshesCompoundExample.tsx

@@ -8,7 +8,7 @@ import {
 } from "@react-three/rapier";
 import { useEffect, useRef } from "react";
 import { useSuzanne } from "../all-shapes/AllShapesExample";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 const COUNT = 10;
 

demo/src/joints/JointsExample.tsx → demo/src/examples/joints/JointsExample.tsx

@@ -10,7 +10,7 @@ import {
 } from "@react-three/rapier";
 import { useImperativeHandle } from "react";
 import { useFrame } from "@react-three/fiber";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 import { Quaternion } from "three";
 
 const ShadowElement = forwardRef((_, ref) => (

demo/src/kinematics/KinematicsExample.tsx → demo/src/examples/kinematics/KinematicsExample.tsx

@@ -3,7 +3,7 @@ import { useFrame } from "@react-three/fiber";
 import { RigidBody, RigidBodyApi } from "@react-three/rapier";
 import { useEffect, useRef } from "react";
 import { Euler, Quaternion } from "three";
-import { Demo } from "../App";
+import { Demo } from "../../App";
 
 const Ball = () => {
   const ball = useRef<RigidBodyApi>(null);