FBX imported not play the animation

Questions
,
1

I’m importing several scenes (FBX) into the same page creating a scene array, each scene goes in a div container. It works great. But the animation is not running.

Here the main code regarding the loader:

 loaderF.load(url, function (object) {
      const mixer = new THREE.AnimationMixer(object);
      var action = mixer.clipAction(object.animations[0]);
      action.play();

      object.traverse(function (child) {
        if (child.isMesh) {
          child.castShadow = true;
          child.receiveShadow = true;
        }
      });

      scene.type_id = a.type;
      scene.add(object);
      object.updateMatrix();
      them.scenes.push(scene); // the Array
    }

The animate method is simple:

 animate: function () {
     this.render();
     requestAnimationFrame(this.animate);
 },

Finally into the render method I have a loop for each scene:

this.scenes.forEach(function (scene) {
      var camera = scene.userData.camera;
      vm.renderer.render(scene, camera);
}

What I am missing about the animations? I checked the fbx file and it contains a single animation

[EDIT] I noticed this error into console:

FBXLoader.js:1842 THREE.FBXLoader: Vertex has more than 4 skinning weights assigned to vertex. Deleting additional weights.

2

Apart from your error you mentioned in your edit, I noticed your animation loop doesn’t have a mixer.update
You probably also need to move your mixer to the global scope to reference it in the animation loop.
I have an example here. You can view the source of the working demo.

3

Thanks! I got 2 errors: the animate method:

  animate: function () {
   this.render();
   requestAnimationFrame(this.animate);
   var delta = this.clock.getDelta();
     if (this.mixer) this.mixer.update(delta);
 },

and the other into the loader I used this but it was in the wrong scope.

Thanks for helping me!

4

I need a suggestion about this task. As I wrote I have an array of scenes, one for each imported FBX. to store all the animations I used the scene.userData.mixer and scene.userData.action. Is this a good solution?

The animate method becomes:

   animate: function () {
      this.render();
      requestAnimationFrame(this.animate);
      const delta = this.clock.getDelta();
      this.scenes.forEach(function(scene){
          scene.userData.mixer.update(delta)
      })
 },

It works, I have all the “single” scenes playing in each DIV. But I noticed the speed is too fast. Why?