Trouble using nav-mesh in a-frame js for my VR project

Question

I added appropriate CDN's for aframe ,aframe extras, recast plugin

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.0.1/dist/aframe-extras.min.js">/script>

,added my nav mesh entity inside <a-scene>

 <a-entity id="wallmesh" position="0 0.769 0" gltf-model="navmesh/nav3.glb" visible="false"></a-entity>

and for player or camera I tried this,

 <a-entity id="player-rig" >
        <a-entity
          id="player"
          networked="template:#avatar-template;attachTemplateToLocal:false;"
          movement-controls="constrainToNavMesh: true"
          camera="active:true;"
          position="-27 2.5 24"
          
          look-controls
          spawn-in-circle="radius:2"
          rotate-with-camera
        >
        <a-entity id="player-body"  networked="template:#body; attachTemplateToLoacal:false;"         position="-.17 -.88 0"></a-entity>
      </a-entity>
      </a-entity>

But my camera didnt move itself and spawned in different position than expected. Please help me out if you find wrong anything in this approach...

Answer 1

The fact that your camera is in the wrong place and not moving suggests you might be hittting this issue, whereby A-Frame fails to notice that you have a user-defined camera, and adds a default camera, which takes over. https://github.com/aframevr/aframe/issues/3921

In the console, enter

document.querySelector('[camera]')

If it returns 2 elements you almost certainly have the issue.

Simplest fix is to ensure you declare your user-defined camera before any <template> tags in your a-scene (you are using Networked A-Frame, so I guess you have some of these?)

Alternatively, something like this code in one of your components would probably also fix the issue.

    const sceneEl = document.querySelector('a-scene')
    
    if (sceneEl.camera.el.id !== 'player') {    
        console.log("Deleting unwanted A-Frame default camera")
        const wrongCameraEntity = this.el.sceneEl.camera.el;
        const cameraEntity = document.getElementById('player');
        cameraEntity.setAttribute('camera', 'active', true);
        wrongCameraEntity.parentEl.removeChild(wrongCameraEntity);
    }