change capsule collider back to three spheres, upgrade cannon, lower segments

Author: alex-shortt

package.json

@@ -58,7 +58,7 @@
     "@geckos.io/snapshot-interpolation": "^1.1.0",
     "@juggle/resize-observer": "^3.2.0",
     "@react-spring/three": "^9.4.5",
-    "@react-three/cannon": "^6.4.0",
+    "@react-three/cannon": "^6.5.0",
     "@react-three/drei": "9.11.3",
     "@react-three/fiber": "^8.0.22",
     "@react-three/xr": "^4.0.1",

src/layers/Player/colliders/CapsuleCollider.tsx

@@ -6,20 +6,15 @@ import { Group } from "three";
 // height of 0.9 (eye level) for a perceived height of 1
 const HEIGHT = 0.9;
 const RADIUS = 0.2;
-const SEGMENTS = 12;
+const SEGMENTS = 10;
 
 const SPHERE_SHAPE: ShapeType = "Sphere";
-const CYLINDER_SHAPE: ShapeType = "Cylinder";
 
 const sphereProps = { type: SPHERE_SHAPE, args: [RADIUS, SEGMENTS, SEGMENTS] };
-const cylinderProps = {
-  type: CYLINDER_SHAPE,
-  args: [RADIUS, RADIUS, HEIGHT - RADIUS * 2, SEGMENTS],
-};
 
-const sphere1 = { ...sphereProps, position: [0, -(HEIGHT - RADIUS), 0] };
-const cylinder = { ...cylinderProps, position: [0, -(HEIGHT / 2), 0] };
-const sphere2 = { ...sphereProps, position: [0, -RADIUS, 0] };
+const topSphere = { ...sphereProps, position: [0, -RADIUS, 0] };
+const middleSphere = { ...sphereProps, position: [0, -(HEIGHT / 2), 0] };
+const bottomSphere = { ...sphereProps, position: [0, -(HEIGHT - RADIUS), 0] };
 
 export const useCapsuleCollider = (pos = [0, 0, 0]) => {
   const vPos = useRef(pos as Triplet);
@@ -33,7 +28,7 @@ export const useCapsuleCollider = (pos = [0, 0, 0]) => {
       segments: SEGMENTS,
       fixedRotation: true,
       type: "Dynamic",
-      shapes: [sphere1, cylinder, sphere2],
+      shapes: [topSphere, middleSphere, bottomSphere],
     }),
     undefined,
     []
@@ -54,18 +49,11 @@ export function VisibleCapsuleCollider() {
     </mesh>
   );
 
-  const createCylinder = (cylinder: any) => (
-    <mesh position={cylinder.position}>
-      <cylinderBufferGeometry args={cylinder.args} />
-      <meshStandardMaterial color="blue" wireframe={true} />
-    </mesh>
-  );
-
   return (
     <group name="collider" position={[1.5, -HEIGHT, 0]}>
-      {createSphere(sphere1)}
-      {createCylinder(cylinder)}
-      {createSphere(sphere2)}
+      {createSphere(topSphere)}
+      {createSphere(middleSphere)}
+      {createSphere(bottomSphere)}
     </group>
   );
 }

src/layers/Player/index.tsx

@@ -79,19 +79,17 @@ export function Player(props: PlayerLayer) {
     );
   }, []);
 
-  // due to use-cannon bugs, we have to manually check for the active subscription
-  const activeSubId = useRef<number>();
   useEffect(() => {
-    const subId = Math.random();
-    activeSubId.current = subId;
-    bodyApi.position.subscribe((p) => {
-      if (activeSubId.current !== subId) return;
-      position.current.fromArray(p);
-    });
-    bodyApi.velocity.subscribe((v) => {
-      if (activeSubId.current !== subId) return;
-      velocity.current.fromArray(v);
-    });
+    const unsubPos = bodyApi.position.subscribe((p) =>
+      position.current.fromArray(p)
+    );
+    const unsubVel = bodyApi.velocity.subscribe((v) =>
+      velocity.current.fromArray(v)
+    );
+    return () => {
+      unsubPos();
+      unsubVel();
+    };
   }, [bodyApi, bodyApi.position, bodyApi.velocity]);
 
   useFrame(() => {

yarn.lock

@@ -1235,10 +1235,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@pmndrs/cannon-worker-api@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@pmndrs/cannon-worker-api/-/cannon-worker-api-2.1.0.tgz#c4650a59a9f4e919157c85a0dfcd37894dd2b31f"
-  integrity sha512-sXqDYEWfY99LYwnHcr3nPeTSqkXii2MBFG2O2Yv/+PIy63tiBJz5CIijkPr1+dmLV2YGSQjSzQFcaTNFMcOcRA==
+"@pmndrs/cannon-worker-api@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@pmndrs/cannon-worker-api/-/cannon-worker-api-2.3.0.tgz#5ef133833ef858a264d95fc70106ca567f113475"
+  integrity sha512-XFR/IABU6uIEllocfGBV9SVakQWIYrZq/Ijk2ZYTv2jYorDebvT4cW8GWIE6UO/T/NChpI+fBTGlUs6wwZW5sg==
 
 "@react-spring/animated@~9.4.5":
   version "9.4.5"
@@ -1286,12 +1286,12 @@
   resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.5.tgz#9c71e5ff866b5484a7ef3db822bf6c10e77bdd8c"
   integrity sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==
 
-"@react-three/cannon@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@react-three/cannon/-/cannon-6.4.0.tgz#89aee95752c0f02caac04fa97675ccec59bd9b61"
-  integrity sha512-hrT7ploQOCKyP/vVSm9RWN2r2WPxjpTHDNnkxzwa/doK3IyREJ+40Ghor7E7pf76sjRgJFBrypVUSpKDcescTA==
+"@react-three/cannon@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@react-three/cannon/-/cannon-6.5.0.tgz#72077716a5e51f37339134de261de5244d034787"
+  integrity sha512-C3ZC0bJwQAXQtvaNMURoVLISsbHfvASLhFmZSzseAfA6vEiza8RvcVsmByTPrKxF9udDpRmN9tQgtX6DA3deYg==
   dependencies:
-    "@pmndrs/cannon-worker-api" "^2.1.0"
+    "@pmndrs/cannon-worker-api" "^2.3.0"
     cannon-es "^0.20.0"
     cannon-es-debugger "^1.0.0"