Estoy creando un entorno de juego de realidad virtual multiusuario donde el usuario puede seleccionar su propio avatar con restricción de movimiento para la malla de navegación, creé un componente como tal para cambiar el 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); } } });

y en función de que el usuario seleccione el botón de radio, llamé a un controlador de función, haga clic para configurar un modelo gltf diferente

 function handleClick(detail) { const id = detail.value; document.getElementById('cameraRig').setAttribute('update-gltf-model', 'src', '#' + id); }

donde los detalles provienen del botón de radio apropiado seleccionado. Mi cámara está conectada en red y restringida a malla de navegación

 <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>

También he adjuntado un código de trabajo en glitch . Ayúdenme en este sentido