HELP! Animated GLB is complete on Image Target Scan

🧑‍💻 Technical Support
1

Hello! DESPERATE for help.

I have looked at every previous forum subject about this, and pleaded with ChatGPT to help. But my animation is STILL complete when I scan the printed target Image.

Below is the code I am using in a “index.html” file. The image name is “AR” and the animation name is “24Mill.glb”

GLB Animation on Image Target 
<!-- A-Frame and 8thWall -->
<script src="https://cdn.8thwall.com/web/aframe/8frame/8frame.js"></script>

<script>
  AFRAME.registerComponent('toggle-visibility-on-target', {
    init: function () {
      const model = document.querySelector('#model');
      let animationMixer;

      model.addEventListener('model-loaded', () => {
        animationMixer = model.components['animation-mixer'];
        if (animationMixer) {
          animationMixer.pause();
          console.log('Animation Mixer ready and paused');
        }
      });

      this.el.addEventListener('targetFound', () => {
        console.log('Target found');
        model.setAttribute('visible', true);
        if (animationMixer) {
          // Play all clips if multiple or play first clip explicitly
          animationMixer.play(); // should work for all clips if clip: * is set
          // Or, to be sure, play clip by name like:
          // animationMixer.play('YourClipName');
        }
      });

      this.el.addEventListener('targetLost', () => {
        console.log('Target lost');
        model.setAttribute('visible', false);
        if (animationMixer) {
          animationMixer.pause();
          animationMixer.stop();
        }
      });
    },
  });
</script>

  <!-- Use a-entity with image-target component -->
  <a-entity image-target="name: AR" toggle-visibility-on-target position="0 0 0">
    <a-entity
      id="model"
      gltf-model="#model-asset"
      animation-mixer="paused: true"
      scale="0.5 0.5 0.5"
      visible="false">
    </a-entity>
  </a-entity>
</a-scene>
2

Also… I’ve tried to debug this multiple times and no issues arise. Clearly this is user error on my part.

3

Looks like you’re not using the correct name for the Image Target events:

this.el.sceneEl.addEventListener('xrimagefound', imageFound)
this.el.sceneEl.addEventListener('xrimageupdated', showImage)
this.el.sceneEl.addEventListener('xrimagelost', imageLost)