One of the ‘nice’ parts of being between jobs is you have time to explore frameworks and new technologies you didn’t have time for when you were full time on the job.
Here is a standalone example of pathfinding using the PlayCanvas Engine.
I’ve seen a few examples out there for the Recast portion, but not so much on the Detour functionality. This is a simple implementation of both.
https://jhinrichs.com/examples/pathfinding/
P.S. The Recast / Detour stuff is compatible with Three JS and Babylon JS as well. I chose PlayCanvas for this because I wanted to check out the new 2.0 changes in PlayCanvas.
Directions: Clicking on the platform will cause the Actor to navigate to the point clicked using the most advantageous path. If you click anywhere else and drag you can rotate the camera.
The technologies used are listed below. I tend to only use the PlayCanvas editor for assets and handle the code / scripts externally. I decided to use Javascript ES6 (as opposed to React) to hilite the use of the latest Playcanvas ESM script formats. Typescript is used for the main application. The proprietary PlayCanvas script format has some requirements that don’t appear to transfer to Typescript really well, so I didn’t use Typescript for those. I used Tailwind for the little bit of CSS needed. Vite is the builder.
Javascript ES6 / ESM
Typescript
Tailwind CSS
Playcanvas Engine
Recast / Detour Libraries
Vite