# Morph Targets with GLTF Gui

**URL:** <https://discourse.threejs.org/t/morph-targets-with-gltf-gui/15451>\
**Category:** Questions\
**Tags:** morph-targets, datgui, animation\
**Created:** [May 22, 2020, 12:31pm UTC](https://discourse.threejs.org/t/morph-targets-with-gltf-gui/15451 "2020-05-22T12:31:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/coder/32/11082_2.png) [@Coder](https://discourse.threejs.org/u/Coder)\
**Post date:** [May 22, 2020, 12:31pm UTC](https://discourse.threejs.org/t/morph-targets-with-gltf-gui/15451/1 "2020-05-22T12:31:39Z")

</div>

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.

```auto
 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
    });

folder.open();

.
.
.

 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;

    scene.add(mesh);

```

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 22, 2020, 3:11pm UTC](https://discourse.threejs.org/t/morph-targets-with-gltf-gui/15451/2 "2020-05-22T15:11:19Z")

</div>

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

[https://threejs.org/examples/webgl\_morphtargets](https://threejs.org/examples/webgl_morphtargets)

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()](https://threejs.org/docs/index.html#api/en/animation/AnimationClip.CreateFromMorphTargetSequence).

---

<div class="post-metadata">

**Author:** ![Coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/coder/32/11082_2.png) [@Coder](https://discourse.threejs.org/u/Coder)\
**Post date:** [May 22, 2020, 3:25pm UTC](https://discourse.threejs.org/t/morph-targets-with-gltf-gui/15451/3 "2020-05-22T15:25:39Z")

</div>

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](https://github.com/mrdoob/three.js/blob/cd7a88859b4fe1671322b8dd5c2b5cbd040fc376/examples/webgl_animation_skinning_morph.html#L201)

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

---

<div class="post-metadata">

**Author:** ![Anish\_Kumar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anish_kumar/32/39755_2.png) [@Anish\_Kumar](https://discourse.threejs.org/u/Anish_Kumar)\
**Post date:** [May 8, 2024, 6:32pm UTC](https://discourse.threejs.org/t/morph-targets-with-gltf-gui/15451/4 "2024-05-08T18:32:00Z")

</div>

@Coder  
Hey, did you found any solution for this?, I am also looking for the same.