npm up

.devcontainer/devcontainer.json

@@ -4,7 +4,7 @@
   //
   // this is inspired from https://youtu.be/AYRxDoUxcfQ?t=1103s (see: https://github.com/github/codespaces-preact/blob/782235cc78702dc2a46a6906979356b51ac269d5/.devcontainer/devcontainer.json)
   //
-  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:16",
+  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:20",
   // "hostRequirements": {
   //   "cpus": 4
   // },

package.json

@@ -9,26 +9,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@react-three/drei": "^9.48.6",
-    "@react-three/fiber": "^8.9.2",
-    "@react-three/rapier": "^0.11.2",
-    "@react-three/xr": "^5.1.2",
-    "leva": "^0.9.34",
-    "nipplejs": "^0.10.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@react-three/drei": "^9.102.6",
+    "@react-three/fiber": "^8.15.19",
+    "@react-three/rapier": "^1.3.0",
+    "@react-three/xr": "^5.7.1",
+    "leva": "^0.9.35",
+    "nipplejs": "^0.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "three": "^0.146.0"
+    "three": "^0.162.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/three": "^0.146.0",
-    "@vitejs/plugin-react": "^3.0.0",
-    "eslint": "^8.31.0",
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
+    "@types/three": "^0.162.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.3"
+    "typescript": "^5.4.3",
+    "vite": "^5.2.3"
   }
 }

src/App.tsx

@@ -27,12 +27,12 @@ function App() {
           <Controllers />
           <Hands />
 
-          <Physics
+          <Physics debug
             gravity={[0, -60, 0]}
             // timeStep={1 / 60}
             //
           >
-            <Debug />
+
 
             <Layout>
               <Scene />

src/Layout.tsx

@@ -58,7 +58,7 @@ function Layout({
         intensity={2}
         shadow-bias={-0.0001}
       />
-      <ambientLight intensity={0.2} />
+      <ambientLight intensity={1} />
 
       {gui.grid && <gridHelper args={[30, 30, 30]} position-y=".01" />}
       {gui.axes && <axesHelper args={[5]} />}

src/components/Rope.tsx

@@ -1,19 +1,20 @@
+import * as THREE from 'three'
 import { useFrame } from "@react-three/fiber";
 import { Sphere, CatmullRomLine, PivotControls } from "@react-three/drei";
 import {
-  RigidBodyApi,
+
   RigidBody,
-  RigidBodyApiRef,
+
   useSphericalJoint,
 } from "@react-three/rapier";
-import { forwardRef, ReactNode, useRef, createRef, useState } from "react";
+import { forwardRef, ReactNode, useRef, createRef, useState, RefObject } from "react";
 import { Vector3 } from "three";
 
 import usePivot from "./usePivot";
 
 import type { GroupProps } from "@react-three/fiber";
 import type { LineProps } from "@react-three/drei";
-import type { RigidBodyProps } from "@react-three/rapier";
+import type { RapierRigidBody, RigidBodyProps } from "@react-three/rapier";
 
 //
 // Rope component
@@ -25,7 +26,7 @@ type RopeSegmentProps = RigidBodyProps & {
   children: ReactNode;
 };
 
-const RopeSegment = forwardRef<RigidBodyApi, RopeSegmentProps>(
+const RopeSegment = forwardRef<RapierRigidBody, RopeSegmentProps>(
   ({ children, ...rest }, ref) => {
     return (
       <RigidBody ref={ref} {...rest}>
@@ -39,10 +40,16 @@ const RopeSegment = forwardRef<RigidBodyApi, RopeSegmentProps>(
  * We can wrap our hook in a component in order to initiate
  * them conditionally and dynamically
  */
-const RopeJoint = ({ a, b }: { a: RigidBodyApiRef; b: RigidBodyApiRef }) => {
+const RopeJoint = ({
+  a,
+  b
+}: {
+  a: RefObject<RapierRigidBody>;
+  b: RefObject<RapierRigidBody>;
+}) => {
   useSphericalJoint(a, b, [
-    [-(radius + offset), 0, 0],
-    [radius + offset, 0, 0],
+    [-0.5, 0, 0],
+    [0.5, 0, 0]
   ]);
   return null;
 };
@@ -63,7 +70,7 @@ export const Rope = (props: RopeProps) => {
   ]);
 
   const refs = useRef(
-    Array.from({ length: props.length }).map(() => createRef<RigidBodyApi>())
+    Array.from({ length: props.length }).map(() => createRef<RapierRigidBody>())
   );
 
   const pivotControlsRef = useRef<THREE.Group>(null);
@@ -77,7 +84,7 @@ export const Rope = (props: RopeProps) => {
     if (!groupRef.current) return;
 
     const points = refs.current.map(({ current: body }) => {
-      const pos = body?.translation().clone() || new Vector3();
+      const pos = body && new Vector3().copy(body.translation()) || new Vector3();
 
       return groupRef.current!.worldToLocal(pos);
     });
@@ -116,7 +123,7 @@ export const Rope = (props: RopeProps) => {
         points={points} // Array of Points
         color="#ec36a0"
         lineWidth={3} // In pixels (default)
-        segments={64}
+        // segments={64}
       />
 
       <PivotControls ref={pivotControlsRef} scale={2} />

src/components/usePivot.ts

@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import * as THREE from "three";
 
-import type { RigidBodyApi } from "@react-three/rapier";
+import type { RapierRigidBody } from "@react-three/rapier";
 import { useFrame } from "@react-three/fiber";
 
 import type { RefObject } from "react";
@@ -15,12 +15,16 @@ const linvelStrength = 20;
 const angvelStrength = 20;
 
 function usePivot(
-  rigidBodyRef: RefObject<RigidBodyApi>,
+  rigidBodyRef: RefObject<RapierRigidBody>,
   pivotControlsRef: RefObject<THREE.Object3D>,
   arrowHelperRef?: RefObject<THREE.ArrowHelper>
 ) {
   const [v1] = useState(new THREE.Vector3(0, 0, 0));
   const [v2] = useState(new THREE.Vector3(0, 0, 0));
+  const [v3] = useState(new THREE.Vector3(0, 0, 0));
+  const [q1] = useState(new THREE.Quaternion());
+  const [q2] = useState(new THREE.Quaternion());
+  const [e1] = useState(new THREE.Euler());
 
   useFrame(() => {
     const rigidBody = rigidBodyRef.current;
@@ -50,12 +54,12 @@ function usePivot(
       // angular velocity
       //
 
-      const qb = pivotControls.getWorldQuaternion(new THREE.Quaternion());
-      const qa = rigidBody.rotation();
+      const qb = pivotControls.getWorldQuaternion(q2);
+      const qa = q1.copy(rigidBody.rotation());
 
       const qdiff = qb.multiply(qa.invert()); // quaternion "diff" https://stackoverflow.com/a/22167097/133327
-      const angvel = new THREE.Euler().setFromQuaternion(qdiff);
-      const angvel2 = new THREE.Vector3(angvel.x, angvel.y, angvel.z);
+      const angvel = e1.setFromQuaternion(qdiff);
+      const angvel2 = v3.set(angvel.x, angvel.y, angvel.z);
 
       rigidBody.setAngvel(angvel2.multiplyScalar(angvelStrength), true);
     }