根据用户偏好改变网络a帧中的化身

我正在创建一个多用户VR游戏环境,用户可以通过导航网格的移动约束选择自己的化身,我创建了一个组件,用于更改化身

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);
    }
  }
});

根据用户选择单选按钮,我调用了一个函数句柄,单击以设置不同的gltf模型

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

其中,详细信息来自所选的相应单选按钮。我的相机已联网并约束到导航网格

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

我还附加了一个工作代码 glitch 。在这方面帮助我