Animation on Voice Recognition Event A-frame

Question

I'm trying to play an animation on a 3D model (gltf model) when a voice command is said, but the animation just play once, the following times that I say the voice command nothing happens.

I was trying is the following code:

var ent = document.querySelector('#model3D');
if(voiceCommand.includes("hello")) {
   ent.setAttribute("animation",'property: rotation; to: 0 360 0; loop: false; dur: 5000');
}

Could you please give me some ideas to solve this issue?

Answer 1

The animation plays once, because you add an animation component with loop: false - so it's just being attached once, and plays one cycle.

You should use the startEvents property and restart the animation whenever you want:

// when the window is clicked
window.addEventListener('click', e => {
  // emit the event
  document.querySelector('a-box').emit('foo');
});

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <!-- The animation is here from the beginning -->
  <a-box position="0 1 -3" color="#4CC3D9" 
         animation="property: rotation; from: 0 0 0; to: 0 360 0; 
                    loop: false; dur: 400; startEvents: foo"></a-box>
</a-scene>