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...
Try knocking down the version of A-Frame to 1.0.4 and see if it works.
The Extras component has not been update recently and the first thing I noticed is that the navmesh component was broken when moving up from the above version. Has to do with the deprecation of Geometry in Three.js I believe.
Try Ada Rose Cannon's XR boiler plate and grab the simple-navmesh-constraint.
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);
}