Morph targets keyframes?


I need to use morph targets combined with user interaction. I have looked at the theree.js examples of morph targets usage but I’m still confused. I must note that I’m using gltf loader for my project. I have two main interactions I’m struggling with but the origin of the problem, in my opinion, is the same: is it possible to keyframe morph targets animation?

First interaction: On mouse down activate the animation. The first morph target should start first, and then 5 frames after that the second one should follow. They should play at the same time with 5 frames difference. Now they just play simultaneously. Morph targets - hold

Second interaction: On click of the button the target should morph from one to another fluidly. Now click works but I want to add a 5 frame transition from one morph target to another. three.js webgl - morph targets - horse

Just for reference, this is how the individual shapes look like:

Any help or suggestions will be much appreciated! Thanks :slightly_smiling_face:

Morph target animation consists of two basic parts. The actual morph targets (sometimes called shape keys) and the corresponding influence values. A single value defines how much influence a particular morph target has on the final shape of the geometry. It is usually between 0 and 1. Morph target animation is accomplished by animating these influence values.

The following example does this manually:

This example generates keyframes from a morph target sequence and plays the animation via three.js's animation system.


Thanks for the reply! :slightly_smiling_face:

I am now trying to follow the Morph Target Horse example, however, I have problems making it work for gltf.

The problem is that when I try to use CreateFromMorphTargetSequence, the geometry.morphTargets is undefined and the animation won’t play.

I have seen this issue on github BufferGeometry with morphAttributes does not create mesh with morphTargetInfluences · Issue #11277 · mrdoob/three.js · GitHub but since it is fixed, am I doing something wrong in my code?:

      var loader = new THREE.GLTFLoader();
      loader.load( '../../../assets/models/sphere.gltf', function ( geometry ) {

        geometry.scene.traverse( function ( node ) {

            if ( node.isMesh ){
                mesh = node;
                mesh.material.morphTargets = true;

        } );


        scene.add( mesh );

        mixer = new THREE.AnimationMixer( mesh );

        var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'testmorph', geometry.morphTargets, 25 );
        mixer.clipAction( clip ).setDuration( 1 ).play();


I should also say that I have tested my model in the gltfViewer and the morph targets worked as expected, so I’m not sure how to replicate the morph targets that work in the viewer.

The clip is already created by GLTFLoader.

loader.load( '../../../assets/models/sphere.gltf', function ( gltf ) {

   console.log( gltf.animations ); // array of AnimationClips 

} );

And it worked! Thank you @Mugen87