Button cannot be add in Studio: Face Effects

🧑‍💻 Technical Support
1

Hi, i want to build a project of AR Glasses try-on. I have uploaded 2 glasses models in glb format and created a new file called “index.html”. However no matter how i change my code, the button is not showing out when I build and play. Is it because that my code have some errors or I should upgrade to Pro plan since currently I’m using basic plan of 8th wall.

here is my code:

AR Glasses Try-On 
<!-- UI Buttons -->
<div style="position: absolute; top: 10px; left: 10px; z-index: 10">
  <button onclick="switchGlasses('glasses')" style="padding: 10px">Glasses 1</button>
  <button onclick="switchGlasses('glasses_2')" style="padding: 10px">Glasses 2</button>
</div>

<!-- A-Frame Scene -->
<a-scene
  xrweb
  xrface
  xrextras-gesture-detector
  xrextras-runtime-error
  xrextras-loading
  renderer="colorManagement: true"
  embedded
  vr-mode-ui="enabled: false"
  device-orientation-permission-ui="enabled: true">
  <!-- Camera -->
  <a-camera active="true" position="0 0 0"></a-camera>

  <!-- Face Anchor -->
  <a-entity faceanchor id="faceAnchor">
    <!-- Glasses Entity will be loaded dynamically -->
    <a-entity id="glassesModel" position="0 0 0" scale="1 1 1" rotation="0 0 0"></a-entity>
  </a-entity>
</a-scene>

<!-- JavaScript for Switching Glasses -->
<script>
  const glassesMap = {
    glasses: 'assets/glasses.glb',
    glasses_2: 'assets/glasses_2.glb',
  };

  function switchGlasses(key) {
    const glassesEntity = document.getElementById('glassesModel');
    const modelUrl = glassesMap[key];

    // Remove current model if any
    if (glassesEntity.getAttribute('gltf-model')) {
      glassesEntity.removeAttribute('gltf-model');
    }

    // Set new model
    glassesEntity.setAttribute('gltf-model', modelUrl);

    // Optionally re-tune position/scale per model here
    if (key === 'glasses') {
      glassesEntity.setAttribute('scale', '1 1 1');
      glassesEntity.setAttribute('position', '0 0 0');
    } else if (key === 'glasses_2') {
      glassesEntity.setAttribute('scale', '1.2 1.2 1.2');
      glassesEntity.setAttribute('position', '0 0.02 0');
    }
  }
</script>
2

Hi, welcome to the forums!

If you’re on a basic plan it means you’re using Studio. Studio doesn’t work the same as Editor. It doesn’t support AFrame and HTML etc. Have you taken a look at our Face Effects example for Studio?