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

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>

CodePudding user response：

To control animation in a-frame is to use predefined animation-mixer component by aframe extra's.

<head>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
</head>
<body>
  <a-scene>
    <a-entity id="model"
      gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb"
      position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>
  </a-scene>
  <script>
    document.getElementById("model").setAttribute("animation-mixer", "clip:swimming");
    const timedelay = setTimeout(delayFunction, 2000);
    function delayFunction() {
      document.getElementById("model").setAttribute("animation-mixer", "clip:bite");
    }
  </script>
</body>

where you can set the required animation to clip attribute and play any animation based on your program logic. Use this for reference if any. Here in my code swimming animation plays first and after 2 seconds bite animation plays.

CodePudding user response：

Wait until the model is loaded with:

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

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>