[solved] How to morph to a target

Hey all, I’ve been messing a lot with morphing in three.js and have made some progress. I can’t however fade to a particular morph target.

Here’s an example of where I have reached.

The relevant code is :
mesh.morphTargetInfluences[ 2 ] = 1;
This jumps to the target, rather than smoothly fading to it.

Any suggestions?

The values of morphTargetInfluences can be in the range 0 to 1, where zero is no influence and 1 is full influence. So if you set mesh.morphTargetInfluences[ 2 ] = 1;, then you are jumping to full influence.

However, in your app you are fading / blending between morph targets, so perhaps you figured this out already?

1 Like

Hi, thanks for the response. I have tried to use tween.js for these values, but it seems to not have an effect. I know the tweening works because I can move the whole object, but not the values of the morphTargetInfluences.

I used this with no effect:
var tweenA = new TWEEN.Tween( mesh.morphTargetInfluences[ 2 ] ).to( 1.0, 70 ).start();

Hi! Have a look at this post:

Hey prisoner849, thank you for this. I see that we are using tween.js differently. You seem to be doing the morphTargetInfluences change onupdate, and this works well for me too.

Tween.js takes an object and tweens its property(-ies), not just a single simple value.
Tween.js user guide.

An option of how you can do it without .onUpdate():

Can morphTargetInfluences values be set per instance when a GLTF that has morphing targets is instanced?

Answered at stackoverflow:

Hi @Mugen87 , it seems the StackOverflow link is dead, I have a kind of similar question:

In my case of LipSync the MorphTarget must be very fast, do you think a Blend or Tween is efficient ? Creating objects, etc …


The above answer at stackoverflow just stated that it is not possible animated individual instances of InstancedMesh via morph target or skeletal animation. It seems this particular topic is unrelated to your question at stackoverflow.