Morph Targets with GLTF Gui

I created a GLTF model with 2 Morph Targets.
One Sphere => which Morphs to suzanne and also to a Cone.

I loaded them in three.js and was able to produce one of the morphing through the below code.

 var params = {
      morphTarget: 0

 var gui = new dat.GUI();

 var folder = gui.addFolder('Morph Targets');

 folder.add(params, 'morphTarget', 0, 1).step(0.01).onChange(function(value) {
    mesh.morphTargetInfluences[0] = value


 var loader = new THREE.GLTFLoader();
 loader.load('models/suzanne2morphs.glb', function(gltf) {
    gltf.scene.traverse(function(node) {
        if (node.isMesh) mesh = node;

    mesh.material.morphTarget = true;


The mesh.morphTargetInfluences[0] = value sets the slider for 1st morph (sphere to suzanne)
and changing it to [1] does morph to cone.

But I don’t know how to loop through it and make mesh.morphTargetInfluences[i] = value to change both morphs at the same time

I am new to this
Can anyone help me solve this

1 Like

Why don’t you make a second slider for the second influence value similar to the following example?

Or are you looking for an animation that automatically animates from sphere to suzanne to cone? You should be able to create an appropriate animation clip via AnimationClip.CreateFromMorphTargetSequence().

1 Like

Thankyou so much for the response bro.
It did work when I do two seperate gui for the individual influences.

But I think it would be more efficient to do it with a loop automatically assign values and influences . I found one in the animated_skinning_and_morphing example.

Link : Link to the loop of morph gui

Is there any way to reciprocate in the same way with my code.

1 Like