AnimationMixer not animating

I want to import animation from an .fbx file with the AnimationMixer, but the animation doesn’t seem to run. I don’t get any errors and the .fbx model does load in the scene. All the other functionality still works

here is the code for the animation

    const modelLoader = new THREE.FBXLoader(loadingManager)
    this.model;
    var mixer;
    
    //load in the boat, from reference in the resource folder.
    modelLoader.load
        ('resources/models/Defeated.fbx', (function (object) {

            this.model = object;
            this.model.scale.set(0.01,0.01,0.01);
            mixer = new THREE.AnimationMixer(this.model);

            const action = mixer.clipAction(this.model.animations[0]);
            action.play();

            object.traverse(function (child) {
                if (child.isMesh) {
                    boatMaterial.metalness = 0;
                    child.material = boatMaterial;
                    
                }
            })
            scene.add(this.model);
        }).bind(this));
    this.animate = function(clock) {
        // animation with THREE.AnimationMixer.update(timedelta)
        var delta = clock.getDelta();                
        if (mixer) {
            if(this.mixer){ mixer.update(delta);}
            console.log(mixer.time);
        }
    }

the above code is in a function called Boat, reffered to in another function below as “boat”

const clock = new THREE.Clock()

//this updates frames.
const tick = () => {
    const elapsedTime = clock.getElapsedTime()

    // Update objects

    boat.Update(posOffset, rotOffset);

    boat.UpdateCameraPos(camera);
    boat.animate(clock);

    // Update Orbital Controls
    // controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

Does the animation work if you remove this code block?

No, removing that bit of code does remove the material, but the model still isn’t animating sadly.

Do you mind sharing the FBX asset in this topic?

Of course.

I modeled and animated this asset for the final product itself
BoatAnimated.fbx (838.2 KB)

However, for testing purposes I also a model with animation from Mixamo. I figured that if that animation works the problem wouldn’t be at the AnimationMixers part. I can’t upload that here because the file size is too big, but if you want to try it with a mixamo animation I think you can just take any off the site

I can playback the animation when importing the asset in the three.js edtior although the rotation of the propeller does not look right.

In any event, an animation playback is still possible. So there is probably something else wrong in your application. Any chances to provide an editable live example that demonstrates the issue?

BTW: FBX is not a super reliable format since many programs implement parts of it differently. You might want to import your FBX assets in Blender, make sure the animations look good and then export to glTF.

Loading glTF assets produces more consistent result like with any other common 3D format (like OBJ, Collada or FBX).

Haha yeah the rotation might be a little wrong, but that’s on me never having animated something before, so I’ll fix that later.

I don’t really know how the live example works, but I can give the github page I’m using for the code. I pushed the most recent changes so it’s up to date with the question.

In the meantime I will try using glTF, I used it before and it gave some trouble, but I feel like I learned some more so I might be able to make it work

A GitHub repo is fine. I can use it to create a live link:

https://raw.githack.com/Malmaars/threejs-doneright/master/dist/index.html

It seems this.mixer is undefined in your animation loop. Hence, no update happens.

You should be able to fix the issue by assigning the created animation mixer to the respective variable inside your onLoad() callback.

Wait so the

            mixer = new THREE.AnimationMixer(this.model);

doesn’t assign the variable? I honestly have no clue how else I would assign the variable. It’s in the onLoad callback right?

afbeelding

I changed

            if(this.mixer){ mixer.update(delta);}

to

            if(mixer){ mixer.update(delta);}

and it does seem to move mixer.time now, but I don’t see any animation on screen