How can I control a .gtlf2 mesh animation in aframe with onmouseover event?

Question

I'm trying to control (start/stop) gtlf animations onmouseover. I found a good example but it relies on the model being in .json format:

Example: https://rexraptor08.github.io/animation-controls/

Source: https://github.com/rexraptor08/animation-controls

Problem is I'm not longer able export .json format from blender as the addon has been removed: https://github.com/mrdoob/three.js/tree/dev/utils/exporters/blender

Anyone know how to achieve this?

Answer 1

You can use glTF animations using the animation-mixer component.

First of all, you need to export your model with Kupoman's exporter. I've used the Khronos group one, but it has trouble with exporting models with multiple animations.

Once you have the model exported, just include aframe-extras, so you can use the animation loader.

Then you can use it like this:

<a-entity gltf-model="url(model.gltf)"
   animation-mixer="clip: DoStuff;"></a-entity>

---

If you want to start an animation with any event, just create a component, which will set up the animation-mixer:

this.el.addEventListener("click", (e)=> {
  this.el.setAttribute("animation-mixer", "clip", "DoStuff") 
})

Also be sure to check out Don McCurdys guide.