feat: change three debug helpers to take required params as standalon…

…e constructor arguments

.changeset/thin-planes-guess.md

@@ -0,0 +1,5 @@
+---
+'@recast-navigation/three': minor
+---
+
+feat: change three debug helpers to take required params as standalone constructor arguments

apps/navmesh-website/src/features/recast/crowd/recast-agent.tsx

@@ -69,20 +69,20 @@ export const RecastAgent = forwardRef<RecastAgentRef, RecastAgentProps>(
         maxAgentRadius: agentRadius,
       });
 
-      const { point: agentPosition } = navMeshQuery.findClosestPoint({ x: 0, y: 0, z: 0 });
-
-      const agent = crowd.addAgent(
-        agentPosition,
-        {
-          radius: agentRadius,
-          height: agentHeight,
-          maxAcceleration: agentMaxAcceleration,
-          maxSpeed: agentMaxSpeed,
-        }
-      );
+      const { point: agentPosition } = navMeshQuery.findClosestPoint({
+        x: 0,
+        y: 0,
+        z: 0,
+      });
+
+      const agent = crowd.addAgent(agentPosition, {
+        radius: agentRadius,
+        height: agentHeight,
+        maxAcceleration: agentMaxAcceleration,
+        maxSpeed: agentMaxSpeed,
+      });
 
-      const crowdHelper = new CrowdHelper({
-        crowd,
+      const crowdHelper = new CrowdHelper(crowd, {
         agentMaterial: new MeshStandardMaterial({ color: 'red' }),
       });
 

examples/three-parcel-example/index.js

@@ -51,7 +51,7 @@ const init = async () => {
   const { success, navMesh } = threeToSoloNavMesh([mesh]);
 
   if (success) {
-    const navMeshHelper = new NavMeshHelper({ navMesh });
+    const navMeshHelper = new NavMeshHelper(navMesh);
 
     scene.add(navMeshHelper);
   }

examples/three-vite-wasm-example/src/index.ts

@@ -51,7 +51,7 @@ const init = async () => {
   const { success, navMesh } = threeToSoloNavMesh([mesh]);
 
   if (success) {
-    const navMeshHelper = new NavMeshHelper({ navMesh });
+    const navMeshHelper = new NavMeshHelper(navMesh);
 
     scene.add(navMeshHelper);
   }

packages/recast-navigation-three/README.md

@@ -118,7 +118,7 @@ This package provides helpers for visualizing various recast-navigation objects
 ```ts
 import { NavMeshHelper } from '@recast-navigation/three';
 
-const navMeshHelper = new NavMeshHelper({ navMesh });
+const navMeshHelper = new NavMeshHelper(navMesh);
 
 scene.add(navMeshHelper);
 
@@ -131,9 +131,9 @@ navMeshHelper.update();
 ```ts
 import { OffMeshConnectionsHelper } from '@recast-navigation/three';
 
-const offMeshConnectionsHelper = new OffMeshConnectionsHelper({
-  offMeshConnections,
-});
+const offMeshConnectionsHelper = new OffMeshConnectionsHelper(
+  offMeshConnections
+);
 
 scene.add(offMeshConnectionsHelper);
 ```
@@ -145,7 +145,7 @@ Visualises obstacles in a `TileCache`.
 ```ts
 import { TileCacheHelper } from '@recast-navigation/three';
 
-const tileCacheHelper = new TileCacheHelper({ tileCache });
+const tileCacheHelper = new TileCacheHelper(tileCache);
 
 scene.add(tileCacheHelper);
 
@@ -160,7 +160,7 @@ Visualises agents in a `Crowd`.
 ```ts
 import { CrowdHelper } from '@recast-navigation/three';
 
-const crowdHelper = new CrowdHelper({ crowd });
+const crowdHelper = new CrowdHelper(crowd);
 
 scene.add(crowdHelper);
 
@@ -175,8 +175,7 @@ You can optionally provide custom materials to the helpers.
 ```ts
 // NavMeshHelper
 const navMeshMaterial = new THREE.MeshBasicMaterial({ color: 'red' });
-const navMeshHelper = new NavMeshHelper({
-  navMesh,
+const navMeshHelper = new NavMeshHelper(navMesh, {
   navMeshMaterial,
 });
 
@@ -190,24 +189,21 @@ const offMeshConnectionExitCircleMaterial = new THREE.MeshBasicMaterial({
 const offMeshConnectionLineMaterial = new THREE.LineBasicMaterial({
   color: 'white',
 });
-const offMeshConnectionsHelper = new OffMeshConnectionsHelper({
-  offMeshConnections,
+const offMeshConnectionsHelper = new OffMeshConnectionsHelper(offMeshConnections, {
   entryCircleMaterial: offMeshConnectionEntryCircleMaterial,
   exitCircleMaterial: offMeshConnectionExitCircleMaterial,
   lineMaterial: offMeshConnectionLineMaterial,
 });
 
 // TileCacheHelper
 const obstacleMaterial = new THREE.MeshBasicMaterial({ color: 'blue' });
-const tileCacheHelper = new TileCacheHelper({
-  tileCache,
+const tileCacheHelper = new TileCacheHelper(tileCache, {
   obstacleMaterial,
 });
 
 // CrowdHelper
 const agentMaterial = new THREE.MeshBasicMaterial({ color: 'red' });
-const crowdHelper = new CrowdHelper({
-  crowd,
+const crowdHelper = new CrowdHelper(crowd, {
   agentMaterial,
 });
 ```

packages/recast-navigation-three/src/helpers/crowd-helper.ts

@@ -9,7 +9,6 @@ import {
 } from 'three';
 
 export type CrowdHelperParams = {
-  crowd: Crowd;
   agentMaterial?: Material;
 };
 
@@ -20,13 +19,13 @@ export class CrowdHelper extends Object3D {
 
   agentMaterial: Material;
 
-  constructor({ crowd, agentMaterial }: CrowdHelperParams) {
+  constructor(crowd: Crowd, params?: CrowdHelperParams) {
     super();
 
     this.recastCrowd = crowd;
 
     this.agentMaterial =
-      agentMaterial ?? new MeshBasicMaterial({ color: 'red' });
+      params?.agentMaterial ?? new MeshBasicMaterial({ color: 'red' });
 
     this.update();
   }

packages/recast-navigation-three/src/helpers/nav-mesh-helper.ts

@@ -9,28 +9,27 @@ import {
 } from 'three';
 
 export type NavMeshHelperParams = {
-  navMesh: NavMesh;
   navMeshMaterial?: Material;
 };
 
 export class NavMeshHelper extends Object3D {
   navMesh: NavMesh;
 
-  navMeshMaterial: Material;
-
   mesh: Mesh;
 
-  geometry: BufferGeometry;
+  navMeshMaterial: Material;
+
+  navMeshGeometry: BufferGeometry;
 
-  constructor({ navMesh, navMeshMaterial }: NavMeshHelperParams) {
+  constructor(navMesh: NavMesh, params?: NavMeshHelperParams) {
     super();
 
     this.navMesh = navMesh;
 
-    this.geometry = new BufferGeometry();
+    this.navMeshGeometry = new BufferGeometry();
 
-    this.navMeshMaterial = navMeshMaterial
-      ? navMeshMaterial
+    this.navMeshMaterial = params?.navMeshMaterial
+      ? params.navMeshMaterial
       : new MeshBasicMaterial({
           color: 'orange',
           transparent: true,
@@ -40,7 +39,7 @@ export class NavMeshHelper extends Object3D {
 
     this.update();
 
-    this.mesh = new Mesh(this.geometry, this.navMeshMaterial);
+    this.mesh = new Mesh(this.navMeshGeometry, this.navMeshMaterial);
 
     this.add(this.mesh);
   }
@@ -53,11 +52,13 @@ export class NavMeshHelper extends Object3D {
   update() {
     const [positions, indices] = this.navMesh.getDebugNavMesh();
 
-    this.geometry.setAttribute(
+    this.navMeshGeometry.setAttribute(
       'position',
       new BufferAttribute(Float32Array.from(positions), 3)
     );
-    this.geometry.setIndex(new BufferAttribute(Uint32Array.from(indices), 1));
-    this.geometry.computeVertexNormals();
+    this.navMeshGeometry.setIndex(
+      new BufferAttribute(Uint32Array.from(indices), 1)
+    );
+    this.navMeshGeometry.computeVertexNormals();
   }
 }

packages/recast-navigation-three/src/helpers/off-mesh-connections-helper.ts

@@ -13,7 +13,6 @@ import {
 } from 'three';
 
 export type OffMeshConnectionsHelperParams = {
-  offMeshConnections?: OffMeshConnectionParams[];
   entryCircleMaterial?: Material;
   exitCircleMaterial?: Material;
   lineMaterial?: LineBasicMaterial;
@@ -28,23 +27,22 @@ export class OffMeshConnectionsHelper extends Object3D {
 
   lineMaterial: LineBasicMaterial;
 
-  constructor({
-    offMeshConnections,
-    entryCircleMaterial,
-    exitCircleMaterial,
-    lineMaterial,
-  }: OffMeshConnectionsHelperParams) {
+  constructor(
+    offMeshConnections: OffMeshConnectionParams[],
+    params?: OffMeshConnectionsHelperParams
+  ) {
     super();
 
     this.offMeshConnections = offMeshConnections ?? [];
 
     this.entryCircleMaterial =
-      entryCircleMaterial ?? new MeshBasicMaterial({ color: 'green' });
+      params?.entryCircleMaterial ?? new MeshBasicMaterial({ color: 'green' });
 
     this.exitCircleMaterial =
-      exitCircleMaterial ?? new MeshBasicMaterial({ color: 'blue' });
+      params?.exitCircleMaterial ?? new MeshBasicMaterial({ color: 'blue' });
 
-    this.lineMaterial = lineMaterial ?? new LineBasicMaterial({ color: 'red' });
+    this.lineMaterial =
+      params?.lineMaterial ?? new LineBasicMaterial({ color: 'red' });
 
     this.update();
   }

packages/recast-navigation-three/src/helpers/tile-cache-helper.ts

@@ -10,7 +10,6 @@ import {
 } from 'three';
 
 export type TileCacheHelperParams = {
-  tileCache: TileCache;
   obstacleMaterial?: Material;
 };
 
@@ -21,13 +20,13 @@ export class TileCacheHelper extends Object3D {
 
   obstacleMaterial: Material;
 
-  constructor({ tileCache, obstacleMaterial }: TileCacheHelperParams) {
+  constructor(tileCache: TileCache, params?: TileCacheHelperParams) {
     super();
 
     this.tileCache = tileCache;
 
-    this.obstacleMaterial = obstacleMaterial
-      ? obstacleMaterial
+    this.obstacleMaterial = params?.obstacleMaterial
+      ? params.obstacleMaterial
       : new MeshBasicMaterial({
           color: 'red',
           wireframe: true,

packages/recast-navigation/.storybook/common/debug.tsx

@@ -38,36 +38,31 @@ export const Debug = ({
   const navMeshHelper = useMemo(() => {
     if (!navMesh) return null;
 
-    return new NavMeshHelper({
-      navMesh,
+    return new NavMeshHelper(navMesh, {
       navMeshMaterial,
     });
   }, [navMesh, navMeshMaterial]);
 
   const tileCacheHelper = useMemo(() => {
     if (!tileCache) return null;
 
-    return new TileCacheHelper({
-      tileCache,
+    return new TileCacheHelper(tileCache, {
       obstacleMaterial,
     });
   }, [tileCache, obstacleMaterial]);
 
   const crowdHelper = useMemo(() => {
     if (!crowd) return null;
 
-    return new CrowdHelper({
-      crowd,
+    return new CrowdHelper(crowd, {
       agentMaterial,
     });
   }, [crowd, agentMaterial]);
 
   const offMeshConnectionsHelper = useMemo(() => {
     if (!offMeshConnections) return null;
 
-    return new OffMeshConnectionsHelper({
-      offMeshConnections,
-    });
+    return new OffMeshConnectionsHelper(offMeshConnections);
   }, [offMeshConnections]);
 
   useFrame(() => {

packages/recast-navigation/.storybook/stories/external-use/three-pathfinding.stories.tsx

@@ -136,15 +136,20 @@ export const ThreePathfinding = () => {
       y: 0,
       z: 1.5,
     };
-    const startGroupId = pathfinding.getGroup(ZONE, start, true);
+    const startGroupId = pathfinding.getGroup(ZONE, start as Vector3);
 
     const end = {
       x: 1.5,
       y: 0,
       z: -1.5,
     };
 
-    const path = pathfinding.findPath(start, end, ZONE, startGroupId);
+    const path = pathfinding.findPath(
+      start as Vector3,
+      end as Vector3,
+      ZONE,
+      startGroupId
+    );
 
     setNavMeshGeometry(geometry);
     setPath(path);

packages/recast-navigation/.storybook/stories/nav-mesh-query/compute-smooth-path.stories.tsx

@@ -4,8 +4,7 @@ import {
   NavMesh,
   NavMeshQuery,
   OffMeshConnectionParams,
-  QueryFilter,
-  Raw,
+  QueryFilter
 } from '@recast-navigation/core';
 import { threeToSoloNavMesh } from '@recast-navigation/three';
 import React, { useEffect, useState } from 'react';
@@ -297,7 +296,7 @@ function computeSmoothPath(
   const targetPos = new Vector3().copy(closestEnd);
 
   const polys = [...findPathResult.polys.getHeapView()];
-  let smoothPath: Vector3[] = [];
+  const smoothPath: Vector3[] = [];
 
   smoothPath.push(iterPos.clone());
 

packages/recast-navigation/.storybook/stories/obstacles/many-obstacles.stories.tsx

@@ -3,10 +3,9 @@ import {
   Detour,
   NavMesh,
   NavMeshQuery,
-  Raw,
   TileCache,
   statusDetail,
-  statusToReadableString,
+  statusToReadableString
 } from '@recast-navigation/core';
 import { threeToTileCache } from '@recast-navigation/three';
 import React, { useEffect, useState } from 'react';