Swap models in face effects

🧑‍💻 Technical Support
1

I’m trying to create an experience where I can change different hats and glasses using the Face Effects.
I’ve added a button to change the different models, but when the button is pressed, it changes only the 3D model, but is not changing along with all the properties of the face effect, like position, size, etc.
The hat appears in the same place of the glasses, instead of the head.
This is my project:

This is my body.html

Next 3D Model













<xrextras-face-attachment point="noseBridge">
  <a-entity 
  id="model"
  gltf-model="#glasses" 
  scale="1.1 1.1 1.1" 
  position="0 0.05 0"
  class="cantap">
    <a-plane
      position="0.25 -0.01 0"
      height="0.25"
      width="0.4"
      side="back"
      depth-write="false"
      color="#7611B6"
      opacity="0.5"
      roughness="0.25"></a-plane>
    <a-plane
      position="-0.25 -0.01 0"
      height="0.25"
      width="0.4"
      side="back"
      depth-write="false"
      color="#FFC828"
      opacity="0.5"
      roughness="0.25"></a-plane>
  </a-entity>
</xrextras-face-attachment>

<xrextras-face-attachment point="noseBridge">
  <a-entity 
  id="model"
  gltf-model="#glasses" 
  scale="1.1 1.1 1.1" 
  position="0 0.05 0"
  class="cantap">
    <a-plane
      position="0.25 -0.01 0"
      height="0.25"
      width="0.4"
      side="back"
      depth-write="false"
      color="#7611B6"
      opacity="0.5"
      roughness="0.25"></a-plane>
    <a-plane
      position="-0.25 -0.01 0"
      height="0.25"
      width="0.4"
      side="back"
      depth-write="false"
      color="#FFC828"
      opacity="0.5"
      roughness="0.25"></a-plane>
  </a-entity>
</xrextras-face-attachment>



This is my next-button.js:
const nextButtonComponent = () => ({
init() {
const modelList = [‘glasses’, ‘cap’, ‘pirate’]

const model = document.getElementById('model')
const nextButton = document.getElementById('nextbutton')
nextButton.style.display = 'block'

let idx = 1  // Start with the 2nd model as 1st is already in the scene on page load
const nextModel = () => {

  // Need to remove gltf-component first due to AFrame regression: https://github.com/aframevr/aframe/issues/4341
  model.removeAttribute('gltf-model')
  // Switch to next model in the list
  model.setAttribute('gltf-model', `#${modelList[idx]}`)

  idx = (idx + 1) % modelList.length
}
nextButton.onclick = nextModel  // Switch to the next model when the button is pressed.

},
})

export {nextButtonComponent}

What am I doing wrong?

2

It looks like the pivot point and scaling of the hat are off. In your 3D modeling software, adjust the pivot point to match the one on the pirate hat. If you want to check the correct scale and pivot point, I suggest downloading the pirate hat asset and reviewing it in Blender.