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>