Swap Mask with Mask Effects

🧑‍💻 Technical Support
1

Hello, I want to make it so that when I press a button the header changes, but nothing works, help
here is body.html:`






<xrextras-face-mesh xrextras-hider-material></xrextras-face-mesh>

<!-- Шапка (по умолчанию пиратская) -->
<a-entity
  id="hat"
  gltf-model="#pirate-hat"
  position="0 0.55 0.2"
  scale="1.2 1.35 1.35"
  rotation="-10 0 0"></a-entity>

<a-entity
  id="hat"
  gltf-model="#diadem-hat"
  position="0 0.55 0.2"
  scale="1.2 1.35 1.35"
  rotation="-10 0 0"></a-entity>

<div
  style="
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
  ">
  <button id="nextbutton">Change Hat</button>
</div>




this is js:export function hatSwitcherComponent() {
const hats = [‘pirate-hat’, ‘diadem-hat’] // Список идентификаторов шапок
let currentHatIndex = 0 // Индекс текущей шапки

let hatEntity = document.getElementById(‘hat’) // Получаем элемент шапки

const nextButton = document.getElementById(‘nextbutton’) // Получаем кнопку

nextButton.addEventListener(‘click’, () => {
currentHatIndex = (currentHatIndex + 1) % hats.length // Изменяем индекс шапки

const hatId = hats[currentHatIndex]  // Получаем новый идентификатор шапки
const newHat = document.createElement('a-entity')  // Создаем новый элемент шапки

newHat.setAttribute('gltf-model', `#${hatId}`)  // Устанавливаем новую шапку
newHat.setAttribute('position', '0 0.55 0.2')
newHat.setAttribute('scale', '1.2 1.35 1.35')
newHat.setAttribute('rotation', '-10 0 0')

hatEntity.parentNode.replaceChild(newHat, hatEntity)  // Заменяем текущую шапку на новую
hatEntity = newHat  // Обновляем ссылку на элемент шапки

})
}
`

2

I’d be happy to take a look. Could you share your project with the support workspace?