GLTF loader not recognizing animation actions

Questions
1

I’m new to Three.js, and have been experimenting with loading .glb files from Blender. I made a simple cube with a rotate and sway animation, and pushed those actions to the NLA before exporting to a binary .glb file. I tested the file online, and also imported the .glb into a blank Blender project, and the animations showed up in both instances. But for some reason when I load the .glb into Three.js, the model will load and render properly (I can see it displayed correctly with the applied textures) but the animation clips don’t seem to be recognized by Three.js for some reason. Here is the example code from my project, where I’m just loading the .glb and then assigning an AnimationMixer to it, but when I print out the mixer to inspect it, it has an empty animations and/or actions array. Am I looking in the wrong place or using the wrong GLTFLoader? It’s also possible that I’m not exporting correctly from Blender, but I’m fairly certain the export is okay because the animations show up on https://gltf-viewer.donmccurdy.com/ and also import into new Blender project correctly.

import { GLTFLoader } from "./gltfLoader.js";
import { AnimationMixer } from './three.core.js';

const gloader = new GLTFLoader();

export function loadModel(name, path) {
    return new Promise((resolve, reject) => {
        gloader.load(path, (glb) => {
            const model = glb.scene;
            const mixer = new AnimationMixer(model);
            console.log("mixer = ", mixer);

            resolve(model);

        }, undefined, (err) => {
            console.error(`Error loading model ${name}`, err);
            reject(err);
        });
    });
}
2

additionally, I know that in order to trigger the animations I need to assign the actions and use the animate() function to update them, but when attempting to assign the animations via “const action = glb.scene.animations[0]” I get the console error “clipObject is undefined”, which led me to inspect the GLTFLoader.js file, where I found the clipObject in question, and that led me to check if the animations were even registering correctly when loading the .glb. I also tried .gltf but same results.

3

Have you tried to check if the animations are present in the file with…

const model = glb.scene;
console.log(glb.animations) // check with this line
const mixer = new AnimationMixer(model);

I think the confusion here is trying to access animations from the incorrect nested level of the parsed glb object…

Maybe try const action = glb.animations[0]

2 Likes
4

Ah! thank you, that seemed to be the issue. using const action = glb.animations[0] showed the animation name correctly thank you for that!

1 Like