I am currently working on a project where I am looking to repurpose the following example:
All I need to do is add a trigger that will start the animation on a click event.
I have successfully set this up to run on my server by using the code from https://github.com/aframevr/aframe/tree/master/examples/showcase/model-viewer
However, I am now facing challenges in coding the event handler.
In the model-viewer.js file, there is a line of code that initiates the animation:
modelEl.setAttribute('animation-mixer', ''); I am struggling to figure out how to play it on a click event. I have previously implemented similar functionality in a simpler setup (https://codepen.io/wspluta/pen/rNwReNB)
<script>
AFRAME.registerComponent('animationhandler', {
init: function() {
let playing = false;
this.el.addEventListener('click', () => {
if (!playing) {
this.el.setAttribute('animation-mixer', 'clip:*; loop: once; clampWhenFinished: true; duration : 6');
playing=true;
} else {
this.el.removeAttribute('animation-mixer');
playing=false;
}
});
}
})
</script>
<body>
<a-scene>
<a-assets>
<a-asset id="sky" src="https://raw.githubusercontent.com/WSPluta/webxr102/main/tatooine.jpg"> </a-asset>
<a-asset-item id="tie" src="https://raw.githubusercontent.com/WSPluta/webxr102/main/newTie.gltf"></a-asset-item>
</a-assets>
<a-entity id="tie" gltf-model="#tie" position="0 0.5 -5" scale="0.25 0.25 0.25" animationhandler></a-entity>
<a-plane id="background" position="0 5 -15" height="9" width="16" rotation="0 0 0" opacity="0.9"></a-plane>
<a-sky src="#sky"></a-sky>
<a-camera>
<a-cursor color="yellow"></a-cursor>
</a-camera>
</a-scene>
</body>
Unfortunately, I am having trouble modifying the example/showcase document to implement this feature. I really want to leverage the camera movement and other features provided in the example/showcase file.