How to load animations and skeleton correctly (gltfloader)?

I’m unable to see the animations, using this model

var loader = new THREE.GLTFLoader();
loader.load('js/simple.gltf', function (gltf) {

Error below:

THREE.Object3D.add: object not an instance of THREE.Object3D. Da {name: "ArmatureAction", tracks: Array(6), duration: 0.375, uuid: "63D4D6B7-C3DE-406B-9DFF-F043D337D4E1"}duration: 0.375name: "ArmatureAction"tracks: (6) [hc, ed, hc, hc, ed, hc]uuid: "63D4D6B7-C3DE-406B-9DFF-F043D337D4E1"__proto__: Objectoptimize: ƒ ()resetDuration: ƒ ()trim: ƒ ()validate: ƒ ()constructor: ƒ Da(a,b,c)__proto__: Object
    add @ three.min.js:509
    (anonymous) @ index4.html:56
    (anonymous) @ GLTFLoader.js:62
    (anonymous) @ GLTFLoader.js:209
    (anonymous) @ GLTFLoader.js:1600
    Promise.then (async)
    THREE.GLTFLoader.GLTFParser.parse @ GLTFLoader.js:1593
    parse @ GLTFLoader.js:195
    (anonymous) @ GLTFLoader.js:60
    (anonymous) @ three.min.js:674
    load (async)
    load @ three.min.js:674
    load @ GLTFLoader.js:56
    (anonymous) @ index4.html:54

That could help you gltf animation

1 Like

You can’t add animations clips to the scene graph. Only objects of type Object3D.

So I copied donmccurdy’s code here. It went fine without error, but I’m still unable to see the animation. Am I missing something?

let mixer;
const loader = new THREE.GLTFLoader();
loader.load('js/simple.gltf', function (gltf) {
const model = gltf.scene;
mixer = new THREE.AnimationMixer(model);
gltf.animations.forEach((clip) => {

I got it work! muhahahahahhahahahahahahhahahahah


Now how do I show the skeleton corretly? I added these to the loader.load(), but skeleton is not shown.

    helper = new THREE.SkeletonHelper(model);
    helper.material.linewidth = 3;
    helper.visible = true;

Try this here.

console.log( mesh.skeleton.bones );  //for check

var helper = new THREE.SkeletonHelper( mesh.skeleton.bones[ 0 ] );
helper.skeleton = mesh.skeleton;
helper.visible = true;			
scene.add( helper );


console.log( model.skeleton.bones ); //for check

var helper = new THREE.SkeletonHelper( model.skeleton.bones[ 0 ] );
helper.skeleton = model.skeleton;
helper.visible = true;			
scene.add( helper );

console returned me an array of two bones, which is correct.
However the skeleton is still not shown.

Try opening your file in and opening the JS console. Maybe you can see more there.

The skeleton is not shown there neither… The console saysFailed to load resource: net::ERR_BLOCKED_BY_CLIENT on a track.gif:1 image. Do I need a texture for the bone too?

There might be something wrong with the model I was using. I switched to another model, it works fine now. Thanks.

congratulations :+1:

How did you solve it? I have the same problem!

1 Like

Also got the same issue. The missing piece is there: GLTF loading but not appearing

Especially the last part:

Finally, call mixer.update(deltaTimeInSeconds) before each frame.