Upgrade to @dimforge/[email protected] (pmndrs#23)

* fix: update some components to 0.8.1 api * feat: update to 0.8.1 - fix crashes when cleaning up rigid bodies - remove the need for 'key' on reused objects when Suspense updates trigger * chore: changeset * fix: update <Debug /> to new shape api * feat(Joints): update joints example * fix: rename "car" to "simple car" * chore: changeset
isaac-mason · Jul 3, 2022 · dd535aa · dd535aa
1 parent 7a0e6fe
commit dd535aa
Show file tree

Hide file tree

Showing 15 changed files with 307 additions and 266 deletions.
diff --git a/.changeset/many-keys-jog.md b/.changeset/many-keys-jog.md
@@ -0,0 +1,5 @@
+---
+"@react-three/rapier": patch
+---
+
+Better <Physics /> lifecycle making reinitialization more stable
diff --git a/.changeset/wild-cameras-suffer.md b/.changeset/wild-cameras-suffer.md
@@ -0,0 +1,5 @@
+---
+"@react-three/rapier": minor
+---
+
+Update to @dimforge/rapier3d-compat@0.8.1, pinned version
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -14,7 +14,7 @@ import { CradleExample } from "./cradle/Cradle";
 import { Transforms } from "./transforms/Transforms";
 import { Cluster } from "./cluster/Cluster";
 import { AllShapes } from "./all-shapes/AllShapes";
-import { Car } from './car/Car';
+import { Car } from "./car/Car";
 import {
   NavLink,
   NavLinkProps,
@@ -66,8 +66,8 @@ export const App = () => {
         fontFamily: "sans-serif",
       }}
     >
-      <Suspense fallback="Loading...">
-        <Canvas shadows>
+      <Canvas shadows>
+        <Suspense fallback="Loading...">
           <ContextBridge>
             <Physics colliders={false}>
               <directionalLight
@@ -103,46 +103,43 @@ export const App = () => {
                   path="all-shapes"
                   element={<AllShapes setUI={setUI} />}
                 />
-                <Route
-                  path="car"
-                  element={<Car setUI={setUI} />}
-                />
+                <Route path="car" element={<Car setUI={setUI} />} />
               </Routes>
 
-              <Floor key={location.pathname} />
+              <Floor />
             </Physics>
           </ContextBridge>
-        </Canvas>
+        </Suspense>
+      </Canvas>
 
-        <div
-          style={{
-            position: "absolute",
-            top: 24,
-            left: 24,
-            display: "flex",
-            gap: 12,
-          }}
-        >
-          <Link to="/">Shapes</Link>
-          <Link to="joints">Joints</Link>
-          <Link to="components">Components</Link>
-          <Link to="cradle">Cradle</Link>
-          <Link to="cluster">Cluster</Link>
-          <Link to="car">Car</Link>
-          <Link to="all-shapes">All Shapes</Link>
-          <Link to="transforms">Inherited Transforms</Link>
-        </div>
+      <div
+        style={{
+          position: "absolute",
+          top: 24,
+          left: 24,
+          display: "flex",
+          gap: 12,
+        }}
+      >
+        <Link to="/">Shapes</Link>
+        <Link to="joints">Joints</Link>
+        <Link to="components">Components</Link>
+        <Link to="cradle">Cradle</Link>
+        <Link to="cluster">Cluster</Link>
+        <Link to="car">Simple Car</Link>
+        <Link to="all-shapes">All Shapes</Link>
+        <Link to="transforms">Inherited Transforms</Link>
+      </div>
 
-        <div
-          style={{
-            position: "absolute",
-            top: 24,
-            right: 24,
-          }}
-        >
-          {ui}
-        </div>
-      </Suspense>
+      <div
+        style={{
+          position: "absolute",
+          top: 24,
+          right: 24,
+        }}
+      >
+        {ui}
+      </div>
     </div>
   );
 };

diff --git a/demo/src/components/Components.tsx b/demo/src/components/Components.tsx
@@ -29,7 +29,6 @@ const Map = () => {
             nodes.map.geometry.index?.array || [],
           ]}
         />
-        ;
       </RigidBody>
     </group>
   );
@@ -100,9 +99,8 @@ export const ComponentsExample: Demo = ({ setUI }) => {
   return (
     <group>
       <CompoundShape />
-
+      <Pear />
       <Ball />
-
       <Map />
     </group>
   );

diff --git a/demo/src/joints/Joints.tsx b/demo/src/joints/Joints.tsx
@@ -1,4 +1,4 @@
-import { Box, Shadow } from "@react-three/drei";
+import { Box, Shadow, Sphere } from "@react-three/drei";
 import { createRef, forwardRef, ReactNode, useEffect, useRef } from "react";
 import {
   RigidBodyTypeString,
@@ -8,11 +8,12 @@ import {
   Vector3Array,
 } from "@react-three/rapier";
 import { useImperativeHandle } from "react";
+import { useFrame } from "@react-three/fiber";
 
-const ShadowBox = forwardRef((_, ref) => (
-  <Box castShadow ref={ref}>
+const ShadowElement = forwardRef((_, ref) => (
+  <Sphere castShadow ref={ref} args={[0.5]}>
     <meshPhysicalMaterial />
-  </Box>
+  </Sphere>
 ));
 
 const RopeSegment = forwardRef(
@@ -28,13 +29,13 @@ const RopeSegment = forwardRef(
     },
     ref
   ) => {
-    const [cuboid, api] = useCuboid(
+    const [cuboid, api] = useBall(
       {
-        position: position,
+        position,
         type,
       },
       {
-        args: [0.5, 0.5, 0.5],
+        args: [0.5],
       }
     );
 
@@ -48,8 +49,8 @@ const RopeSegment = forwardRef(
 
 const RopeJoint = ({ a, b }) => {
   const joint = useSphericalJoint(a, b, [
-    [0.5, 0.5, 0.5],
-    [-0.5, -0.5, -0.5],
+    [-0.5, 0, 0],
+    [0.5, 0, 0],
   ]);
   return null;
 };
@@ -63,15 +64,24 @@ const Rope = (props: {
     Array.from({ length: props.length }).map(() => createRef())
   );
 
+  useFrame(() => {
+    const now = performance.now();
+    refs.current[0].current.setNextKinematicRotation({
+      x: 0,
+      y: Math.sin(now / 500) * 3,
+      z: 0,
+    });
+  });
+
   return (
     <group>
       {refs.current.map((ref, i) => (
         <RopeSegment
           ref={ref}
           key={i}
-          position={[i * 1.1, 10, 0]}
-          component={ShadowBox}
-          type={i == 0 ? "fixed" : "dynamic"}
+          position={[i * 1, 0, 0]}
+          component={ShadowElement}
+          type={i === 0 ? "kinematicPosition" : "dynamic"}
         />
       ))}
       {refs.current.map(
@@ -89,7 +99,7 @@ const Joints = ({ setUI }) => {
 
   return (
     <group>
-      <Rope length={40} component={ShadowBox} />
+      <Rope length={40} component={ShadowElement} />
     </group>
   );
 };

diff --git a/packages/react-three-rapier/package.json b/packages/react-three-rapier/package.json
@@ -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"

diff --git a/packages/react-three-rapier/readme.md b/packages/react-three-rapier/readme.md