I'm creating a multi user VR game environment where user can select their own avatar with movement constraint to nav-mesh, I created a component as such for changing avatar
AFRAME.registerComponent("update-gltf-model", {
schema: {
src: {type: 'model'},
sync: {default: false}
},
update() {
if (this.data.src && this.data.sync) {
this.el.setAttribute('gltf-model', this.data.src);
}
}
});
and based on user selecting the radio button I called a function handle click to set different gltf-model
function handleClick(detail) {
const id = detail.value;
document.getElementById('cameraRig').setAttribute('update-gltf-model', 'src', '#' + id);
}
where details comes from the appropriate radio button selected. My camera is networked and constrained to nav-mesh
<a-entity class="avatar-head"
id="cameraRig"
camera="near:0.01;"
look-controls="pointerLockEnabled: false"
networked="template:#head-template;attachTemplateToLocal:false;"
wasd-controls="acceleration:20;"
simple-navmesh-constraint="navmesh:.navmesh;fall:0.5;height:1.65;"
position="0 1.65 0"
></a-entity>
I have also attached a working code in glitch. Help me out in this regard