From 61ab4cb64f34c1db507722d2b4aba578114d0720 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIsaac?= Date: Sun, 6 Oct 2024 14:58:17 +1000 Subject: [PATCH] feat: change three debug helpers to take required params as standalone constructor arguments --- .changeset/thin-planes-guess.md | 5 ++++ .../features/recast/crowd/recast-agent.tsx | 26 +++++++++---------- examples/three-parcel-example/index.js | 2 +- examples/three-vite-wasm-example/src/index.ts | 2 +- packages/recast-navigation-three/README.md | 24 +++++++---------- .../src/helpers/crowd-helper.ts | 5 ++-- .../src/helpers/nav-mesh-helper.ts | 25 +++++++++--------- .../helpers/off-mesh-connections-helper.ts | 18 ++++++------- .../src/helpers/tile-cache-helper.ts | 7 +++-- .../.storybook/common/debug.tsx | 13 +++------- .../three-pathfinding.stories.tsx | 9 +++++-- .../compute-smooth-path.stories.tsx | 5 ++-- .../obstacles/many-obstacles.stories.tsx | 3 +-- 13 files changed, 70 insertions(+), 74 deletions(-) create mode 100644 .changeset/thin-planes-guess.md diff --git a/.changeset/thin-planes-guess.md b/.changeset/thin-planes-guess.md new file mode 100644 index 00000000..60a641e8 --- /dev/null +++ b/.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 diff --git a/apps/navmesh-website/src/features/recast/crowd/recast-agent.tsx b/apps/navmesh-website/src/features/recast/crowd/recast-agent.tsx index 879c78ce..a682669c 100644 --- a/apps/navmesh-website/src/features/recast/crowd/recast-agent.tsx +++ b/apps/navmesh-website/src/features/recast/crowd/recast-agent.tsx @@ -69,20 +69,20 @@ export const RecastAgent = forwardRef( 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' }), }); diff --git a/examples/three-parcel-example/index.js b/examples/three-parcel-example/index.js index 17f29cf4..3e857c15 100644 --- a/examples/three-parcel-example/index.js +++ b/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); } diff --git a/examples/three-vite-wasm-example/src/index.ts b/examples/three-vite-wasm-example/src/index.ts index 1d5a568f..7bafefe0 100644 --- a/examples/three-vite-wasm-example/src/index.ts +++ b/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); } diff --git a/packages/recast-navigation-three/README.md b/packages/recast-navigation-three/README.md index 10c36be0..69d4313e 100644 --- a/packages/recast-navigation-three/README.md +++ b/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,8 +189,7 @@ 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, @@ -199,15 +197,13 @@ const offMeshConnectionsHelper = new OffMeshConnectionsHelper({ // 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, }); ``` diff --git a/packages/recast-navigation-three/src/helpers/crowd-helper.ts b/packages/recast-navigation-three/src/helpers/crowd-helper.ts index 6f716f6b..d41ad7a6 100644 --- a/packages/recast-navigation-three/src/helpers/crowd-helper.ts +++ b/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(); } diff --git a/packages/recast-navigation-three/src/helpers/nav-mesh-helper.ts b/packages/recast-navigation-three/src/helpers/nav-mesh-helper.ts index 78e38402..c66f38ce 100644 --- a/packages/recast-navigation-three/src/helpers/nav-mesh-helper.ts +++ b/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(); } } diff --git a/packages/recast-navigation-three/src/helpers/off-mesh-connections-helper.ts b/packages/recast-navigation-three/src/helpers/off-mesh-connections-helper.ts index 9a8bbbce..2e1e35d4 100644 --- a/packages/recast-navigation-three/src/helpers/off-mesh-connections-helper.ts +++ b/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(); } diff --git a/packages/recast-navigation-three/src/helpers/tile-cache-helper.ts b/packages/recast-navigation-three/src/helpers/tile-cache-helper.ts index 185ef0e5..9e6d42f6 100644 --- a/packages/recast-navigation-three/src/helpers/tile-cache-helper.ts +++ b/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, diff --git a/packages/recast-navigation/.storybook/common/debug.tsx b/packages/recast-navigation/.storybook/common/debug.tsx index 364f73ad..c3e199a7 100644 --- a/packages/recast-navigation/.storybook/common/debug.tsx +++ b/packages/recast-navigation/.storybook/common/debug.tsx @@ -38,8 +38,7 @@ export const Debug = ({ const navMeshHelper = useMemo(() => { if (!navMesh) return null; - return new NavMeshHelper({ - navMesh, + return new NavMeshHelper(navMesh, { navMeshMaterial, }); }, [navMesh, navMeshMaterial]); @@ -47,8 +46,7 @@ export const Debug = ({ const tileCacheHelper = useMemo(() => { if (!tileCache) return null; - return new TileCacheHelper({ - tileCache, + return new TileCacheHelper(tileCache, { obstacleMaterial, }); }, [tileCache, obstacleMaterial]); @@ -56,8 +54,7 @@ export const Debug = ({ const crowdHelper = useMemo(() => { if (!crowd) return null; - return new CrowdHelper({ - crowd, + return new CrowdHelper(crowd, { agentMaterial, }); }, [crowd, agentMaterial]); @@ -65,9 +62,7 @@ export const Debug = ({ const offMeshConnectionsHelper = useMemo(() => { if (!offMeshConnections) return null; - return new OffMeshConnectionsHelper({ - offMeshConnections, - }); + return new OffMeshConnectionsHelper(offMeshConnections); }, [offMeshConnections]); useFrame(() => { diff --git a/packages/recast-navigation/.storybook/stories/external-use/three-pathfinding.stories.tsx b/packages/recast-navigation/.storybook/stories/external-use/three-pathfinding.stories.tsx index ff2c9154..ae7e48e5 100644 --- a/packages/recast-navigation/.storybook/stories/external-use/three-pathfinding.stories.tsx +++ b/packages/recast-navigation/.storybook/stories/external-use/three-pathfinding.stories.tsx @@ -136,7 +136,7 @@ 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, @@ -144,7 +144,12 @@ export const ThreePathfinding = () => { 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); diff --git a/packages/recast-navigation/.storybook/stories/nav-mesh-query/compute-smooth-path.stories.tsx b/packages/recast-navigation/.storybook/stories/nav-mesh-query/compute-smooth-path.stories.tsx index cb0b6dfd..a8e0d9bc 100644 --- a/packages/recast-navigation/.storybook/stories/nav-mesh-query/compute-smooth-path.stories.tsx +++ b/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()); diff --git a/packages/recast-navigation/.storybook/stories/obstacles/many-obstacles.stories.tsx b/packages/recast-navigation/.storybook/stories/obstacles/many-obstacles.stories.tsx index f2a8403d..d96cf083 100644 --- a/packages/recast-navigation/.storybook/stories/obstacles/many-obstacles.stories.tsx +++ b/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';