> npm install navcat

navcat

navcat is a javascript navigation mesh construction and querying library for 3D floor-based navigation.

navcat is ideal for use in games, simulations, and creative websites that require navigation in complex 3D environments.

Features

• Navigation mesh generation from 3D geometry
• Navigation mesh querying
• Single and multi-tile navigation mesh support
• Fully JSON serializable data structures
• Pure javascript, written to be highly tree-shakeable
• Works with any javascript engine/library - Babylon.js, PlayCanvas, Three.js, or your own engine

Documentation

This README provides curated explanations, guides, and examples to help you get started with navcat.

API documentation can be found at navcat.dev/docs.

Installation

navcat is available on npm:

npm install navcat

An example of using navcat without any build tools using unpkg can be found here: https://github.com/isaac-mason/navcat-vanilla-html-js-example

Changelog

See the CHANGELOG.md for a detailed list of changes in each version.

Examples

<table> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-crowd-simulation"> <img src="./examples/public/screenshots/example-crowd-simulation.png" width="180" height="120" style="object-fit:cover;"/><br/> Crowd Simulation </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-navmesh-constrained-character-controller"> <img src="./examples/public/screenshots/example-navmesh-constrained-character-controller.png" width="180" height="120" style="object-fit:cover;"/><br/> NavMesh Constrained Character Controller </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-area-filters"> <img src="./examples/public/screenshots/example-area-filters.png" width="180" height="120" style="object-fit:cover;"/><br/> Area Filters </a> </td> </tr> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-area-costs"> <img src="./examples/public/screenshots/example-area-costs.png" width="180" height="120" style="object-fit:cover;"/><br/> Area Costs </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-doors-and-keys"> <img src="./examples/public/screenshots/example-doors-and-keys.png" width="180" height="120" style="object-fit:cover;"/><br/> Doors and Keys </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-dynamic-obstacles"> <img src="./examples/public/screenshots/example-dynamic-obstacles.png" width="180" height="120" style="object-fit:cover;"/><br/> Dynamic Obstacles </a> </td> </tr> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-dynamic-navmesh"> <img src="./examples/public/screenshots/example-dynamic-navmesh.png" width="180" height="120" style="object-fit:cover;"/><br/> Dynamic NavMesh </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-fps-dynamic-navmesh"> <img src="./examples/public/screenshots/example-fps-dynamic-navmesh.png" width="180" height="120" style="object-fit:cover;"/><br/> FPS Dynamic NavMesh </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-multiple-agent-sizes"> <img src="./examples/public/screenshots/example-multiple-agent-sizes.png" width="180" height="120" style="object-fit:cover;"/><br/> Multiple Agent Sizes </a> </td> </tr> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-crowd-simulation-stress-test"> <img src="./examples/public/screenshots/example-crowd-simulation-stress-test.png" width="180" height="120" style="object-fit:cover;"/><br/> Crowd Simulation Stress Test </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-flow-field-pathfinding"> <img src="./examples/public/screenshots/example-flow-field-pathfinding.png" width="180" height="120" style="object-fit:cover;"/><br/> Flow Field Pathfinding </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-find-path"> <img src="./examples/public/screenshots/example-find-path.png" width="180" height="120" style="object-fit:cover;"/><br/> Find Path </a> </td> </tr> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-find-node-path"> <img src="./examples/public/screenshots/example-find-node-path.png" width="180" height="120" style="object-fit:cover;"/><br/> Find Node Path </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-find-straight-path"> <img src="./examples/public/screenshots/example-find-straight-path.png" width="180" height="120" style="object-fit:cover;"/><br/> Find Straight Path </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-find-smooth-path"> <img src="./examples/public/screenshots/example-find-smooth-path.png" width="180" height="120" style="object-fit:cover;"/><br/> Find Smooth Path </a> </td> </tr> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-find-shortest-paths"> <img src="./examples/public/screenshots/example-find-shortest-paths.png" width="180" height="120" style="object-fit:cover;"/><br/> Find Shortest Paths </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-find-diverse-paths"> <img src="./examples/public/screenshots/example-find-diverse-paths.png" width="180" height="120" style="object-fit:cover;"/><br/> Find Diverse Paths </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-raycast"> <img src="./examples/public/screenshots/example-raycast.png" width="180" height="120" style="object-fit:cover;"/><br/> Raycast </a> </td> </tr> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-off-mesh-connections"> <img src="./examples/public/screenshots/example-off-mesh-connections.png" width="180" height="120" style="object-fit:cover;"/><br/> Off-Mesh Connections </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-upload-model"> <img src="./examples/public/screenshots/example-upload-model.png" width="180" height="120" style="object-fit:cover;"/><br/> Upload Model </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-custom-gltf-navmesh"> <img src="./examples/public/screenshots/example-custom-gltf-navmesh.png" width="180" height="120" style="object-fit:cover;"/><br/> Custom GLTF NavMesh </a> </td> </tr> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-solo-navmesh"> <img src="./examples/public/screenshots/example-solo-navmesh.png" width="180" height="120" style="object-fit:cover;"/><br/> Solo NavMesh </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-tiled-navmesh"> <img src="./examples/public/screenshots/example-tiled-navmesh.png" width="180" height="120" style="object-fit:cover;"/><br/> Tiled NavMesh </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-flood-fill-pruning"> <img src="./examples/public/screenshots/example-flood-fill-pruning.png" width="180" height="120" style="object-fit:cover;"/><br/> Flood Fill Pruning </a> </td> </tr> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-find-nearest-poly"> <img src="./examples/public/screenshots/example-find-nearest-poly.png" width="180" height="120" style="object-fit:cover;"/><br/> Find Nearest Poly </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-find-random-point"> <img src="./examples/public/screenshots/example-find-random-point.png" width="180" height="120" style="object-fit:cover;"/><br/> Find Random Point </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-find-random-point-around-circle"> <img src="./examples/public/screenshots/example-find-random-point-around-circle.png" width="180" height="120" style="object-fit:cover;"/><br/> Find Random Point Around Circle </a> </td> </tr> <tr> <td align="center"> <a href="https://navcat.dev/examples#example-mark-compact-heightfield-areas"> <img src="./examples/public/screenshots/example-mark-compact-heightfield-areas.png" width="180" height="120" style="object-fit:cover;"/><br/> Mark Compact Heightfield Areas </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-custom-navmesh-generation"> <img src="./examples/public/screenshots/example-custom-navmesh-generation.png" width="180" height="120" style="object-fit:cover;"/><br/> Custom NavMesh Generation </a> </td> <td align="center"> <a href="https://navcat.dev/examples#example-move-along-surface"> <i