How to load animations and skeleton correctly (gltfloader)?

Questions
1

I’m unable to see the animations, using this model https://threejs.org/examples/?q=simple#webgl_skinning_simple

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

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
2

That could help you gltf animation

1 Like
3

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

4

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;
scene.add(model);
mixer = new THREE.AnimationMixer(model);
gltf.animations.forEach((clip) => {
    mixer.clipAction(clip).play();
});
5

I got it work! muhahahahahhahahahahahahhahahahah

3 Likes
6

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;
    scene.add(helper);
7

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 );

or 

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 );
8

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

9

Try opening your file in gltf-viewer.donmccurdy.com and opening the JS console. Maybe you can see more there.

10

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?

11

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

12

congratulations :+1:

13

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

1 Like
14

Also got the same issue. The missing piece is there: GLTF loading but not appearing - #10 by donmccurdy

Especially the last part:

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