making animation with glb model - animation

Question

I’m begginer with aframe and I’ve an animated glb model (from Mixamo then Blender) on this page https://glitch.com/edit/#!/danseuse?path=index.html%3A30%3A7
It works correctly with this script :
<a-entity gltf-model="#danseuse"
id="danseuseHHP"
position="0 -.5 -6"
animation-mixer=" timeScale: .5 "
></a-entity>
But I would like the animation begin when I click on the glb model.
I read the post https://stackoverflow.com/questions/51058224/how-can-i-control-a-gtlf2-mesh-animation-in-aframe-with-onmouseover-event/69876030#69876030 but I dont understand the second part of the answer of this post (sorry I don’t know javascript).
I use the aframe-extra, how do I change the entity, with for exemple :
event-set__start="_event: click; ??????
Thanks for your help.

Answer 1

You've run into a few different problems here...
First up, event-set doesn't work well with component names with '-'s in them.
https://github.com/supermedium/superframe/issues/296
So using event-set is out (apart from this, it would probably work). You need to write a small component like this.
<script>
AFRAME.registerComponent('animate-on-click', {
init: function() {
this.el.addEventListener("click", (e)=> {
this.el.setAttribute("animation-mixer", "timeScale: .5")
});
}
});
</script>
Then you can include this on your object:
position="0 -.5 -6"
animate-on-click
></a-entity>
See this glitch...
https://glitch.com/edit/#!/animate-on-click
Now for the final problem (and the reason I used a different GLTF in my glitch).
Your GLTF appears to be a skinned mesh. I don't know much about raycasting with a skinned mesh (when I learn more I will come back & update this), but I do know it involves some complications.
See e.g. https://github.com/mrdoob/three.js/pull/19178
Using your GLTF model, I wasn't able to get any raycasting to work at all. So I think there is a further issue that's to do with your GLTF model, and not a problem with the code you posted.
Hope that helps a bit.
Update after investigatng the issues with raycasting on this model.
I haven't completely understood what is going on here, but as far as I can tell...
Raycasting is correctly checking against each body part.
The first check is against a bounding sphere - the idea is to check whether more detailed raycast calcs are worth doing. This is done just with the base model, without any of the bone transformations applied.
These bounding sphere checks consistently fail.
As far as I can tell that is because the base model components are tiny, and only get scaled up to proper size in the process of having the bone transforms applied.
Because THREE.js does the bounding sphere checks against the components before applying these bone transforms, there is virtually zero chance of the raycaster detecting any collisions.
Potentially you could make some changes to the model to address these issues, but I suspect it will be far simpler just to put an invisible plane directly in front of the model, and use raycasting against that to trigger the start of the animation.
Here's a glitch showing that solution:
https://glitch.com/edit/#!/danseuse2