@react-three/rapier 0.15.0 → 0.16.0-canary.0

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

@@ -1,7 +1,7 @@
 import { ActiveEvents, ColliderDesc, EventQueue, RigidBodyDesc } 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, { useRef, useEffect, memo, useMemo, useContext, useState, createContext, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
+import React, { useRef, useEffect, memo, useMemo, useContext, useState, useCallback, createContext, forwardRef, useImperativeHandle, Fragment } from 'react';
 import { Quaternion, Euler, Vector3, Object3D, Matrix4, BufferAttribute, MathUtils, DynamicDrawUsage } from 'three';
 import { useAsset } from 'use-asset';
 import { mergeVertices } from 'three-stdlib';
@@ -47,37 +47,37 @@ function _objectSpread2(target) {
   return target;
 }
 
-const createWorldApi = ref => {
+const createWorldApi = getWorld => {
   return {
-    raw: () => ref.current(),
-    getCollider: handle => ref.current().getCollider(handle),
-    getRigidBody: handle => ref.current().getRigidBody(handle),
-    createRigidBody: desc => ref.current().createRigidBody(desc),
-    createCollider: (desc, rigidBody) => ref.current().createCollider(desc, rigidBody),
+    raw: () => getWorld(),
+    getCollider: handle => getWorld().getCollider(handle),
+    getRigidBody: handle => getWorld().getRigidBody(handle),
+    createRigidBody: desc => getWorld().createRigidBody(desc),
+    createCollider: (desc, rigidBody) => getWorld().createCollider(desc, rigidBody),
     removeRigidBody: rigidBody => {
-      if (!ref.current().bodies.contains(rigidBody.handle)) return;
-      ref.current().removeRigidBody(rigidBody);
+      if (!getWorld().bodies.contains(rigidBody.handle)) return;
+      getWorld().removeRigidBody(rigidBody);
     },
     removeCollider: (collider, wakeUp = true) => {
-      if (!ref.current().colliders.contains(collider.handle)) return;
-      ref.current().removeCollider(collider, wakeUp);
+      if (!getWorld().colliders.contains(collider.handle)) return;
+      getWorld().removeCollider(collider, wakeUp);
     },
-    createImpulseJoint: (params, rigidBodyA, rigidBodyB, wakeUp = true) => ref.current().createImpulseJoint(params, rigidBodyA, rigidBodyB, wakeUp),
+    createImpulseJoint: (params, rigidBodyA, rigidBodyB, wakeUp = true) => getWorld().createImpulseJoint(params, rigidBodyA, rigidBodyB, wakeUp),
     removeImpulseJoint: (joint, wakeUp = true) => {
-      if (!ref.current().impulseJoints.contains(joint.handle)) return;
-      ref.current().removeImpulseJoint(joint, wakeUp);
+      if (!getWorld().impulseJoints.contains(joint.handle)) return;
+      getWorld().removeImpulseJoint(joint, wakeUp);
     },
-    forEachCollider: callback => ref.current().forEachCollider(callback),
+    forEachCollider: callback => getWorld().forEachCollider(callback),
     setGravity: ({
       x,
       y,
       z
-    }) => ref.current().gravity = {
+    }) => getWorld().gravity = {
       x,
       y,
       z
     },
-    debugRender: () => ref.current().debugRender()
+    debugRender: () => getWorld().debugRender()
   };
 };
 
@@ -270,6 +270,7 @@ const createColliderFromOptions = (options, world, scale, getRigidBody) => {
   const desc = ColliderDesc[options.shape](...scaledArgs);
   return world.createCollider(desc, getRigidBody === null || getRigidBody === void 0 ? void 0 : getRigidBody());
 };
+const immutableColliderOptions = ["shape", "args"];
 const massPropertiesConflictError = "Please pick ONLY ONE of the `density`, `mass` and `massProperties` options.";
 
 const setColliderMassOptions = (collider, options) => {
@@ -318,7 +319,7 @@ const mutableColliderOptions = {
   restitutionCombineRule: (collider, value) => {
     collider.setRestitutionCombineRule(value);
   },
-  // To make sure the options all mutalbe options are listed
+  // To make sure the options all mutable options are listed
   quaternion: () => {},
   position: () => {},
   rotation: () => {},
@@ -380,7 +381,7 @@ const useUpdateColliderOptions = (getCollider, props, states) => {
   useEffect(() => {
     const collider = getCollider();
     setColliderOptions(collider, props, states);
-  }, mutablePropsAsFlatArray);
+  }, [...mutablePropsAsFlatArray, getCollider]);
 };
 
 const isChildOfMeshCollider = child => {
@@ -657,6 +658,33 @@ const Debug = /*#__PURE__*/memo(() => {
   }), /*#__PURE__*/React.createElement("bufferGeometry", null)));
 });
 
+/**
+ * Initiate an instance and return a safe getter
+ */
+
+const useImperativeInstance = (createFn, destroyFn, dependencyList) => {
+  const ref = useRef();
+  const getInstance = useCallback(() => {
+    if (!ref.current) {
+      ref.current = createFn();
+    }
+
+    return ref.current;
+  }, dependencyList);
+  useEffect(() => {
+    // Save the destroy function and instance
+    const instance = getInstance();
+
+    const destroy = () => destroyFn(instance);
+
+    return () => {
+      destroy();
+      ref.current = undefined;
+    };
+  }, [getInstance]);
+  return getInstance;
+};
+
 const rapierContext = /*#__PURE__*/createContext(undefined);
 
 const getCollisionPayloadFromSource = (target, other) => {
@@ -706,77 +734,60 @@ const Physics = ({
   const rapier = useAsset(importRapier);
   const {
     invalidate
-  } = useThree();
-  const worldRef = useRef();
-  const getWorldRef = useRef(() => {
-    if (!worldRef.current) {
-      const world = new rapier.World(vectorArrayToVector3(_gravity));
-      worldRef.current = world;
-    }
+  } = useThree(); // Init World
 
-    return worldRef.current;
-  });
+  const getWorld = useImperativeInstance(() => {
+    return new rapier.World(vectorArrayToVector3(_gravity));
+  }, world => {
+    world.free();
+  }, []);
   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 beforeStepCallbacks = useConst(() => new Set());
-  const afterStepCallbacks = useConst(() => new Set()); // Init world
+  const afterStepCallbacks = useConst(() => new Set()); // Update gravity
 
   useEffect(() => {
-    const world = getWorldRef.current();
-    return () => {
-      if (world) {
-        world.free();
-        worldRef.current = undefined;
-      }
-    };
-  }, []); // Update gravity
-
-  useEffect(() => {
-    const world = worldRef.current;
+    const world = getWorld();
 
     if (world) {
       world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
-  const api = useMemo(() => createWorldApi(getWorldRef), []);
+  const api = useMemo(() => createWorldApi(getWorld), []);
   const getSourceFromColliderHandle = useCallback(handle => {
-    const world = worldRef.current;
-
-    if (world) {
-      var _collider$parent;
-
-      const collider = world.getCollider(handle);
-      const colEvents = colliderEvents.get(handle);
-      const colliderState = colliderStates.get(handle);
-      const rigidBodyHandle = collider === null || collider === void 0 ? void 0 : (_collider$parent = collider.parent()) === null || _collider$parent === void 0 ? void 0 : _collider$parent.handle;
-      const rigidBody = rigidBodyHandle !== undefined ? world.getRigidBody(rigidBodyHandle) : undefined;
-      const rbEvents = rigidBody && rigidBodyHandle !== undefined ? rigidBodyEvents.get(rigidBodyHandle) : undefined;
-      const rigidBodyState = rigidBodyHandle !== undefined ? rigidBodyStates.get(rigidBodyHandle) : undefined;
-      const source = {
-        collider: {
-          object: collider,
-          events: colEvents,
-          state: colliderState
-        },
-        rigidBody: {
-          object: rigidBody,
-          events: rbEvents,
-          state: rigidBodyState
-        }
-      };
-      return source;
-    }
+    var _collider$parent;
+
+    const world = getWorld();
+    const collider = world.getCollider(handle);
+    const colEvents = colliderEvents.get(handle);
+    const colliderState = colliderStates.get(handle);
+    const rigidBodyHandle = collider === null || collider === void 0 ? void 0 : (_collider$parent = collider.parent()) === null || _collider$parent === void 0 ? void 0 : _collider$parent.handle;
+    const rigidBody = rigidBodyHandle !== undefined ? world.getRigidBody(rigidBodyHandle) : undefined;
+    const rbEvents = rigidBody && rigidBodyHandle !== undefined ? rigidBodyEvents.get(rigidBodyHandle) : undefined;
+    const rigidBodyState = rigidBodyHandle !== undefined ? rigidBodyStates.get(rigidBodyHandle) : undefined;
+    const source = {
+      collider: {
+        object: collider,
+        events: colEvents,
+        state: colliderState
+      },
+      rigidBody: {
+        object: rigidBody,
+        events: rbEvents,
+        state: rigidBodyState
+      }
+    };
+    return source;
   }, []);
   const [steppingState] = useState({
     previousState: {},
     accumulator: 0
   });
   const step = useCallback(dt => {
-    const world = worldRef.current;
-    if (!world) return;
+    const world = getWorld();
     /* Check if the timestep is supposed to be variable. We'll do this here
       once so we don't have to string-check every frame. */
 
@@ -1032,29 +1043,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-/**
- * Initiate an instance and return a safe getter
- */
-
-const useImperativeInstance = (createFn, destroyFn) => {
-  const ref = useRef();
-  const refGetter = useMemo(() => () => {
-    if (!ref.current) {
-      ref.current = createFn();
-    }
-
-    return ref.current;
-  }, []);
-  useEffect(() => {
-    const instance = refGetter();
-    return () => {
-      destroyFn(instance);
-      ref.current = undefined;
-    };
-  }, []);
-  return refGetter;
-};
-
 /**
  * Takes an object resembling a Vector3 and returs a Three.Vector3
  * @category Math helpers
@@ -1106,8 +1094,6 @@ const euler = ({
   return new Euler(x, y, z);
 };
 
-// Colliders
-
 /**
  * A collider is a shape that can be attached to a rigid body to define its physical properties.
  * @internal
@@ -1127,22 +1113,24 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwarded
     colliderStates
   } = useRapier();
   const rigidBodyContext = useRigidBodyContext();
-  const ref = useRef(null);
+  const ref = useRef(null); // We spread the props out here to make sure that the ref is updated when the props change.
+
+  const immutablePropArray = immutableColliderOptions.flatMap(key => Array.isArray(props[key]) ? [...props[key]] : props[key]);
   const getInstance = useImperativeInstance(() => {
     const worldScale = ref.current.getWorldScale(vec3());
     const collider = createColliderFromOptions(props, world, worldScale, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.getRigidBody);
     return collider;
   }, collider => {
     world.removeCollider(collider);
-  });
+  }, [...immutablePropArray, rigidBodyContext]);
   useEffect(() => {
     const collider = getInstance();
     colliderStates.set(collider.handle, createColliderState(collider, ref.current, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.ref.current));
     return () => {
       colliderStates.delete(collider.handle);
     };
-  }, []);
-  useImperativeHandle(forwardedRef, () => getInstance());
+  }, [getInstance]);
+  useImperativeHandle(forwardedRef, () => getInstance(), [getInstance]);
   const mergedProps = useMemo(() => {
     return _objectSpread2(_objectSpread2({}, cleanRigidBodyPropsForCollider(rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options)), props);
   }, [props, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options]);
@@ -1168,102 +1156,106 @@ const CuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref
   }));
 });
+CuboidCollider.displayName = "CuboidCollider";
+
 /**
  * A round cuboid collider shape
  * @category Colliders
  */
+const RoundCuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "roundCuboid",
+  ref: ref
+})));
+RoundCuboidCollider.displayName = "RoundCuboidCollider";
 
-const RoundCuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "roundCuboid",
-    ref: ref
-  }));
-});
 /**
  * A ball collider shape
  * @category Colliders
  */
+const BallCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "ball",
+  ref: ref
+})));
+BallCollider.displayName = "BallCollider";
 
-const BallCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "ball",
-    ref: ref
-  }));
-});
 /**
  * A capsule collider shape
  * @category Colliders
  */
+const CapsuleCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "capsule",
+  ref: ref
+})));
+CapsuleCollider.displayName = "CapsuleCollider";
 
-const CapsuleCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "capsule",
-    ref: ref
-  }));
-});
 /**
  * A heightfield collider shape
  * @category Colliders
  */
+const HeightfieldCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "heightfield",
+  ref: ref
+})));
+HeightfieldCollider.displayName = "HeightfieldCollider";
 
-const HeightfieldCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "heightfield",
-    ref: ref
-  }));
-});
 /**
  * A trimesh collider shape
  * @category Colliders
  */
+const TrimeshCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "trimesh",
+  ref: ref
+})));
+TrimeshCollider.displayName = "TrimeshCollider";
 
-const TrimeshCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "trimesh",
-    ref: ref
-  }));
-});
 /**
  * A cone collider shape
  * @category Colliders
  */
+const ConeCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "cone",
+  ref: ref
+})));
+ConeCollider.displayName = "ConeCollider";
+
+/**
+ * A round cylinder collider shape
+ * @category Colliders
+ */
+const RoundConeCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "roundCone",
+  ref: ref
+})));
+RoundConeCollider.displayName = "RoundConeCollider";
 
-const ConeCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "cone",
-    ref: ref
-  }));
-});
 /**
  * A cylinder collider shape
  * @category Colliders
  */
+const CylinderCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "cylinder",
+  ref: ref
+})));
+CylinderCollider.displayName = "CylinderCollider";
 
-const CylinderCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "cylinder",
-    ref: ref
-  }));
-});
 /**
- * A convex hull collider shape
+ * A round cylinder collider shape
  * @category Colliders
  */
+const RoundCylinderCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "roundCylinder",
+  ref: ref
+})));
+CylinderCollider.displayName = "RoundCylinderCollider";
 
-const ConvexHullCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
-    shape: "convexHull",
-    ref: ref
-  }));
-});
-CuboidCollider.displayName = "CuboidCollider";
-RoundCuboidCollider.displayName = "RoundCuboidCollider";
-BallCollider.displayName = "BallCollider";
-CapsuleCollider.displayName = "CapsuleCollider";
-HeightfieldCollider.displayName = "HeightfieldCollider";
-TrimeshCollider.displayName = "TrimeshCollider";
-ConeCollider.displayName = "ConeCollider";
-CylinderCollider.displayName = "CylinderCollider";
+/**
+ * A convex hull collider shape
+ * @category Colliders
+ */
+const ConvexHullCollider = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+  shape: "convexHull",
+  ref: ref
+})));
 ConvexHullCollider.displayName = "ConvexHullCollider";
 
 const rigidBodyDescFromOptions = options => {
@@ -1298,6 +1290,7 @@ const createRigidBodyState = ({
     meshType: _meshType
   };
 };
+const immutableRigidBodyOptions = ["args", "colliders", "canSleep"];
 const mutableRigidBodyOptions = {
   gravityScale: (rb, value) => {
     rb.setGravityScale(value, true);
@@ -1448,18 +1441,21 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
       children: undefined
     });
   }, [physicsOptions, props]);
+  const immutablePropArray = immutableRigidBodyOptions.flatMap(key => {
+    return Array.isArray(mergedOptions[key]) ? [...mergedOptions[key]] : mergedOptions[key];
+  });
   const childColliderProps = useChildColliderProps(ref, mergedOptions); // Provide a way to eagerly create rigidbody
 
-  const getInstance = useImperativeInstance(() => {
+  const getRigidBody = useImperativeInstance(() => {
     const desc = rigidBodyDescFromOptions(mergedOptions);
     const rigidBody = world.createRigidBody(desc);
     return rigidBody;
   }, rigidBody => {
     world.removeRigidBody(rigidBody);
-  }); // Only provide a object state after the ref has been set
+  }, immutablePropArray); // Only provide a object state after the ref has been set
 
   useEffect(() => {
-    const rigidBody = getInstance();
+    const rigidBody = getRigidBody();
     const state = createRigidBodyState({
       rigidBody,
       object: ref.current
@@ -1468,17 +1464,17 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
     return () => {
       rigidBodyStates.delete(rigidBody.handle);
     };
-  }, []);
-  useUpdateRigidBodyOptions(getInstance, mergedOptions, rigidBodyStates);
-  useRigidBodyEvents(getInstance, mergedOptions, rigidBodyEvents);
-  useImperativeHandle(forwardedRef, () => getInstance());
+  }, [getRigidBody]);
+  useUpdateRigidBodyOptions(getRigidBody, mergedOptions, rigidBodyStates);
+  useRigidBodyEvents(getRigidBody, mergedOptions, rigidBodyEvents);
+  useImperativeHandle(forwardedRef, () => getRigidBody(), [getRigidBody]);
   const contextValue = useMemo(() => {
     return {
       ref,
-      getRigidBody: getInstance,
+      getRigidBody: getRigidBody,
       options: mergedOptions
     };
-  }, [mergedOptions]);
+  }, [getRigidBody]);
   return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("object3D", _extends({
@@ -1632,7 +1628,7 @@ const useImpulseJoint = (body1, body2, params) => {
       jointRef.current = undefined;
       world.removeImpulseJoint(joint);
     }
-  });
+  }, []);
   return jointRef;
 };
 /**
@@ -1743,4 +1739,4 @@ const interactionGroups = (memberships, filters) => (bitmask(memberships) << 16)
 
 const bitmask = groups => [groups].flat().reduce((acc, layer) => acc | 1 << layer, 0);
 
-export { AnyCollider, BallCollider, CapsuleCollider, ConeCollider, ConvexHullCollider, CuboidCollider, CylinderCollider, HeightfieldCollider, InstancedRigidBodies, MeshCollider, Physics, RigidBody, RoundCuboidCollider, TrimeshCollider, euler, interactionGroups, quat, useAfterPhysicsStep, useBeforePhysicsStep, useFixedJoint, useImpulseJoint, usePrismaticJoint, useRapier, useRevoluteJoint, useSphericalJoint, vec3 };
+export { AnyCollider, BallCollider, CapsuleCollider, ConeCollider, ConvexHullCollider, CuboidCollider, CylinderCollider, HeightfieldCollider, InstancedRigidBodies, MeshCollider, Physics, RigidBody, RoundConeCollider, RoundCuboidCollider, RoundCylinderCollider, TrimeshCollider, euler, interactionGroups, quat, useAfterPhysicsStep, useBeforePhysicsStep, useFixedJoint, useImpulseJoint, usePrismaticJoint, useRapier, useRevoluteJoint, useSphericalJoint, vec3 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.15.0",
+  "version": "0.16.0-canary.0",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",
@@ -26,9 +26,9 @@
     "vitest": "0.29.7"
   },
   "peerDependencies": {
-    "@react-three/fiber": "8.9.1",
-    "react": "18.2.0",
-    "three": ">=0.139.2"
+    "@react-three/fiber": ">=8.9.0",
+    "react": ">=18.0.0",
+    "three": ">=0.139.0"
   },
   "dependencies": {
     "@dimforge/rapier3d-compat": "0.11.2",

package/readme.md

@@ -27,7 +27,7 @@ The goal of this library to is to provide a fast physics engine with minimal fri
 ```tsx
 import { Box, Torus } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
-import { Physics, RigidBody, Debug } from "@react-three/rapier";
+import { Physics, RigidBody, Debug, CuboidCollider } from "@react-three/rapier";
 
 const App = () => {
   return (
@@ -254,7 +254,7 @@ const Scene = () => {
 
     // You can access individual instanced by their index
     rigidBodies.current[40].applyImpulse({ x: 0, y: 10, z: 0 }, true);
-    rigidBodies.at(100).applyImpulse({ x: 0, y: 10, z: 0 }, true);
+    rigidBodies.current.at(100).applyImpulse({ x: 0, y: 10, z: 0 }, true);
 
     // Or update all instances
     rigidBodies.current.forEach((api) => {
@@ -281,7 +281,7 @@ const Scene = () => {
 
   return (
     <InstancedRigidBodies
-      ref={instancedApi}
+      ref={rigidBodies}
       instances={instances}
       colliders="ball"
     >
@@ -314,7 +314,6 @@ const Scene = () => {
 
   return (
     <InstancedRigidBodies
-      ref={instancedApi}
       instances={instances}
       colliders="ball"
       colliderNodes={[
@@ -654,10 +653,14 @@ const JointedThing = () => {
     bodyA,
     bodyB,
     [
-      [0, 0, 0], // Position of the joint in bodyA's local space
-      [0, 0, 0, 1], // Orientation of the joint in bodyA's local space
-      [0, 0, 0], // Position of the joint in bodyB's local space
-      [0, 0, 0, 1], // Orientation of the joint in bodyB's local space
+      // Position of the joint in bodyA's local space
+      [0, 0, 0], 
+      // Orientation of the joint in bodyA's local space
+      [0, 0, 0, 1], 
+      // Position of the joint in bodyB's local space
+      [0, 0, 0], 
+       // Orientation of the joint in bodyB's local space
+      [0, 0, 0, 1],
     ]);
 
   return (
@@ -684,8 +687,10 @@ const JointedThing = () => {
     bodyA,
     bodyB,
     [
-      [0, 0, 0], // Position of the joint in bodyA's local space
-      [0, 0, 0], // Position of the joint in bodyB's local space
+      // Position of the joint in bodyA's local space
+      [0, 0, 0], 
+      // Position of the joint in bodyB's local space
+      [0, 0, 0], 
     ]);
 
   return (
@@ -712,17 +717,15 @@ const JointedThing = () => {
     bodyA,
     bodyB,
     [
-      [0, 0, 0], // Position of the joint in bodyA's local space    
-      [0, 0, 0], // Position of the joint in bodyB's local space
-      [0, 1, 0], // Axis of the joint, expressed in the local-space of the rigid-bodies it is attached to. Cannot be [0,0,0].
+      // Position of the joint in bodyA's local space    
+      [0, 0, 0], 
+      // Position of the joint in bodyB's local space
+      [0, 0, 0], 
+      // Axis of the joint, expressed in the local-space of 
+      // the rigid-bodies it is attached to. Cannot be [0,0,0].
+      [0, 1, 0], 
     ]);
 
-  useEffect(() => {
-    if (joint.current) {
-
-    }
-  }, [])
-
   return (
     <group>
       <RigidBody ref={bodyA}>
@@ -747,9 +750,13 @@ const JointedThing = () => {
     bodyA,
     bodyB,
     [
-      [0, 0, 0], // Position of the joint in bodyA's local space    
-      [0, 0, 0], // Position of the joint in bodyB's local space
-      [0, 1, 0], // Axis of the joint, expressed in the local-space of the rigid-bodies it is attached to. Cannot be [0,0,0].
+      // Position of the joint in bodyA's local space    
+      [0, 0, 0], 
+      // Position of the joint in bodyB's local space
+      [0, 0, 0], 
+      // Axis of the joint, expressed in the local-space of 
+      // the rigid-bodies it is attached to. Cannot be [0,0,0].
+      [0, 1, 0], 
     ]);
 
   return (