Set of components for pathfinding along a nav mesh, using PatrolJS.

• nav-mesh: Assigns model from the current entity as a navigation mesh for the pathfinding system. A navigation mesh is not the same as visible terrain geometry. See below.
• nav-agent: Adds behaviors to an entity allowing it to navigate to any reachable destination along the nav mesh.

Blog post.

Controllers can be activated to begin moving their entity toward a destination. Example:

<!-- NPC -->
<a-entity id="npc"
          gltf-model="npc.gltf"
          nav-agent="speed: 1.5"></a-entity>

<!-- Nav Mesh -->
<a-entity gltf-model="navmesh.gltf"
          nav-mesh></a-entity>

<!-- Scene -->
<a-entity gltf-model="scene.gltf"></a-entity>

var npcEl = document.querySelector('#npc');
npcEl.setAttribute('nav-agent', {
  active: true,
  destination: e.detail.intersection.point
});

The nav-agent component will emit two events:

• navigation-start: Entity beginning travel to a destination.
• navigation-end: Entity has reached destination.

This implementation is meant as a proof-of-concept, and doesn't have all the features and polish of game engine navigation. Currently missing:

• Smooth rotation when navigating around corners.
• Dynamic obstacles, like mobile props and NPCs.
• Multiple nav meshes and/or levels.