1

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

ajai.s
  • 320
  • 2
  • 10
  • 1
    looks similar to what i did [here](https://stackoverflow.com/questions/72000628/adding-selected-character-gltf-model-in-a-frame). Did you try it out? – Piotr Adam Milewski May 27 '22 at 12:17
  • yes. I tried this out but mine is bit different. I need to change in #head-template instead in yours you changed a nested children element. I'm making like this to give animations to avatars like walk and jump based on key-press and key-down – ajai.s May 27 '22 at 15:36

0 Answers0