Morph targets keyframes?

Questions
,
1

Hello,

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:

morph-targets
morph-targets811×513 5.58 KB

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

2

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:

https://threejs.org/examples/webgl_morphtargets_sphere.html

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

https://threejs.org/examples/webgl_morphtargets_horse.html

4 Likes
3

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

        } );

        mesh.scale.set(1,1,1);

        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.

4

The clip is already created by GLTFLoader.

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

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

} );
2 Likes
5

And it worked! Thank you @Mugen87