'How to add navigation path in A-Frame?

I tried various ways A-Frame but, I can't able to get a good way to make a path so that avatar can't go outside that and also can't pass through walls and objects which are there in the scene. I tried to make my own navmesh using blender but maybe I'm missing something.

So please help me regarding this in A-Frame !!

 <a-scene
      inspector-plugin-recast
      renderer="antialias: true;
    colorManagement: true;
    sortObjects: true;
    physicallyCorrectLights: true;
    highRefreshRate: true;"
    >
      <a-assets>
        
        <a-asset-item id="rig" src="./navmesh.gltf"></a-asset-item>
      </a-assets>
      

      <a-entity
        id="rig"
        movement-controls="speed:0.15; constrainToNavMesh: true"
        position="0 0 5"
      >
        <a-entity
          camera
          position="0 1.6 0"
          look-controls="pointerLockEnabled: true"
        >
          <a-cursor nav-pointer raycaster="objects: [nav-mesh]"></a-cursor>
        </a-entity>
      </a-entity>
      <a-entity gltf-model="#rig" nav-mesh visible="false"></a-entity>
    </a-scene>

navmesh.gltf is to give the navigation path to the camera so that is could not go outside this mesh. This gltf i've generated by using

aframe-inspector-plugin-recast.js.

So, it's working but when I'm making my own navmesh and adding it then, either browser didn't load the scene or my camera always goes outside it.

three.jsaframe


Solution 1:[1]

This is a good tutorial on the concept of navmesh: https://www.youtube.com/watch?v=Y52czIft9OU

Other non simpler ways to create a system similar to navmesh is by using physics systems like Ammo.js which is used widely for game development in AR/VR. You would basically create walls around your arena so that the avatar does not go beyond it. You can set the ammo-body for the walls to static and the avatar to dynamic. While the collision logic would need a collider, there are many different ones you can research and test out what works for you the best.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ambriel.AR

Related Questions