How to control .glb model animations in A-FRAME via Three.js

Question

I'm trying to play a glb animation in A-FRAME with Three.js, now it works just for a second and then it stop, could someone help me please? this is my code:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('move', {
  init: function () {
    setTimeout( () => {
      let position = this.el.getAttribute("position")
   console.log(this.el.components['gltf-model'].model )
            // Create an AnimationMixer, and get the list of AnimationClip instances
      const mixer = new THREE.AnimationMixer( this.el.components['gltf-model'].model);
      const clips = this.el.components['gltf-model'].model.animations[0];
      var clock = new THREE.Clock();
      // Play all animations

    mixer.clipAction( clips ).play();
   //In the animation block of your scene:
      var delta = 0.25 * clock.getDelta();
      mixer.update( delta );
    }, 2000)
  }
})
</script>

  <a-scene>
      <a-entity gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb" move position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>                                                        
  </a-scene>

Answer 1

1. Wait until the model is loaded with:

   this.el.addEventListener("model-loaded", evt => /* stuff */)}
   

2. update the animation in the renderloop - on each tick. You could use an interval or something else, but aframe has already a built-in function for this purpose:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('move', {
    init: function() {
      // wait until the model is loaded
      this.el.addEventListener("model-loaded", evt => {
        const mixer = new THREE.AnimationMixer(this.el.components['gltf-model'].model);
        const clips = this.el.components['gltf-model'].model.animations[0];
        mixer.clipAction(clips).play();
        // "expose" the animation mixer
        this.mixer = mixer;
      })
    },
    // on each render loop (actually before each render loop)
    tick: function(t, dt) {
      if (!this.mixer) return; // if the mixer exists
      this.mixer.update(dt / 1000) // update it with the delta time
    }
  })
</script>

<a-scene>
  <a-entity gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb"
  move position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>
</a-scene>