glTF skinned mesh

Hello!

I’m trying to add a skinned model into a scene using glft loader. The problem is that I’m not sure how to do it and I get weird results. When I imported my model into the scene it looked squashed but then I tested it in the gltf viewer it worked perfectly.

To give you an idea of what the problem looks like, I have also tested it with the Cesium man model and here is what happens:

What it should look like

What it looks like in my scene

I have been reading about mesh skinning but the examples I saw were using json/js files so I’m not sure if I have to use THREE.SkinnedMesh three.js docs?

When looking at the gltf extensions example, I could just find:

var animations = gltf.animations;
					if ( animations && animations.length ) {
						mixer = new THREE.AnimationMixer( object );
						for ( var i = 0; i < animations.length; i ++ ) {
							var animation = animations[ i ];
							// There's .3333 seconds junk at the tail of the Monster animation that
							// keeps it from looping cleanly. Clip it at 3 seconds
							if ( sceneInfo.animationTime )
								animation.duration = sceneInfo.animationTime;
							mixer.clipAction( animation ).play();
						}
					}

I tried it but it didn’t work. I think I’m missing something simple in the process.

Any help or advice will be much appreciated! Thanks :slight_smile:

Can you show us your full code, maybe as a live demo?

Hi!

I’m not really sure how to upload models to js-fiddle :pensive: but I’ve added a github repo with the files: GitHub - m-a-y/gltf-skin: A test for gltf skinning and also this is what it looks like Gltf - skin test

Thanks

1 Like

Try this:

 loader.load( '/gltf-skin/assets/models/CesiumMan.gltf', function ( gltf ) {

   var object = gltf.scene;
   var animations = gltf.animations;

   if ( animations && animations.length ) {

      mixer = new THREE.AnimationMixer( object );

      for ( var i = 0; i < animations.length; i ++ ) {

         mixer.clipAction(  animations[ i ] ).play();

      }

   }

   scene.add( object );

} );
2 Likes

Thanks for the reply. It worked for me! :slightly_smiling_face:

There are a couple more questions I have for this topic:

  1. How do I export multiple animations from blender to gltf? I can see that the cesium man has multiple animations to it, but when working on my model and exporting to gltf, it exports only the current one.
    EDIT: I have now found a solution that works for me: instead of using the glTF-Blender_exporter, I tried the Kupoman blendertogltf and it exported all the animations. I’m not sure whether I was putting the wrong settings in the other exporter, or it didn’t have the feature.

  2. For my project I want to use multiple animations of the same character that will be activated by different events - the basic example that I have uploaded is on click: I have now added a new file to my git repo with working skins: gltf-skin/anim-click.html at master · m-a-y/gltf-skin · GitHub also: Gltf - skin test
    The code works as expected but I’m not sure if this is the right/best way to achieve it. For example, can I use multiple mixers on the same object? Is there a better or cleaner way to achieve the effect?

Thanks again!

The glTF 2.0 Exporter for Blender can only export a single action right now.

You should have a single mixer per object. For a simple switch between two animations, just stop the first action and then play the second. Crossfading between animations is also supported:

https://threejs.org/examples/#webgl_animation_skinning_blending

2 Likes

That makes sense. I have now added an updated file that is using one mixer for two animations but am still not sure if I’m doing it correctly: demo, github code

And thanks for suggesting crossfade - I like the effect and will probably give it a try for my project.

1 Like

If you’re using the Blender exporter, there is now an experimental version you can try with support for multiple animations:

Code looks good now :+1:

1 Like

Great! Thanks for checking that for me :slightly_smiling_face: