No squash and stretch on GLTF animation

I’m looking to build a game with ThreeJS, and I’m trying to see if there are any technical limitations as opposed to Unity WebGL.

I created a simple rig and animation in Blender 2.8, which has a bone with a “Stretch To” constraint which will squash and stretch the model.

Here’s what it looks like in Blender:

I’ve exported the file using GLTF and imported it using GLTFLoader, using this code:

var scene, clock, camera, renderer, mixer;
const loader = new THREE.GLTFLoader();
loader.load( 'octahedron.glb', function ( gltf ) {
    let model = gltf.scene;
    
    // Setup
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // Import model
    const skeleton = new THREE.SkeletonHelper( model );
    const animations = gltf.animations;
    mixer = new THREE.AnimationMixer( model );
    mixer.clipAction( animations[ 0 ] ).play();

    // Add model to scene
    scene.add( model );
    scene.add( skeleton );

    // Start render loop
    animate();
    
} );

const animate = function () {
    requestAnimationFrame( animate );
    mixer.update(clock.getDelta() );
    renderer.render( scene, camera );
}

And here’s what it looks like:

It seems like its scaling up and down but the model doesn’t have that squash and stretch effect. How do i get it working?

P.S. I’ve tried importing it as FBX, and it works fine. I just prefer using GLTF as it was recommended in the docs

Can you please share the glTF and Blender file in this thread?

Yup, also included the FBX which does show the squash and stretch, but not the GLTF.

Here they are:
octahedron.blend (658.6 KB)
octahedron.fbx (32.4 KB) octahedron.glb (6.9 KB)

1 Like

I’m getting the same results for this model in:

So, it might be a bug in the exporter if you want to file an issue. I would also try exporting with Always Sample Animations enabled in the export settings, if you haven’t already.

2 Likes

Awesome, enabling the Always Sample Animations in the export settings worked!

Though, the non-deform bone is also deforming the mesh, but I guess that’s another issue unrelated to ThreeJS (https://github.com/KhronosGroup/glTF-Blender-IO/issues/260)

Thanks for the help :smile: