Morph Targets with GLTF Gui

Questions
, ,
1

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

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

2

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

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().

3

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.

4

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