Animate the Morph Target of GLTF object

Questions
,
1

Hello,

I’m working on an animation trigger by a click on a GLTF Object which has animations & Morph Target

Here is my code for my loader which is contain in an init function.

  const loader = new GLTFLoader();
      loader.load(
            "/wp-content/themes/_themename/dist/assets/images/MORPH-RILES.gltf",
            function ( gltf ) {
                // Base Model
                model = gltf.scene;

                // Base of sub model 1 : top
                rilesTop = gltf.scene.children[0].children[0];
                rilesTop.material.envMap = textureCube;
                rilesTop.material.metalness = 0.2;
                rilesTop.material.roughness = 0.0;

                // Base of sub model 2 : bottom
                rilesBottom = gltf.scene.children[0].children[1];
                rilesBottom.material.envMap = textureCube;
                rilesBottom.material.metalness = 0.2;
                rilesBottom.material.roughness = 0.0;

                // Use traverse method to castShadow + receiveShadow (perhaps useless ...)
                model.traverse(o => {
                    if ( o.isMesh ) {
                        o.castShadow = true;
                        o.receiveShadow = true;
                    }
                });

                // add the model to the scene
                scene.add( model );

                // Animation for the model
                mixer = new THREE.AnimationMixer( model );

                // Store animations
                const clips = gltf.animations;

                // animation 1 :  Morphing
                animMorph = THREE.AnimationClip.findByName( clips, 'Morph.001' );
                console.log(animMorph);
                mixer.clipAction( animMorph ).play();


                // animation 2 : Rotation
                animRotation = THREE.AnimationClip.findByName( clips, 'RILESUNDAYZ.001Action' );
                mixer.clipAction( animRotation ).setLoop( THREE.LoopRepeat ).play();

            }
        );

There are 2 animations in this object but I want to create a Morph Target Animation trigger on a click on the animMorph variable.

animMorph = THREE.AnimationClip.findByName( clips, 'Morph.001' );

I am relatively new in three.js and I have issue understanding the logic behind Animation Clip and KeyframeTracks

When I click I want my object to change from track 0 to track 1 and so on. But I don’t know where I can access my tracks of my glft object, how to “link” the Animation Clip and the KeyFrameTracks

I really post this to start a discussion and looking for help !

Thanks a lot !

2

Do you mind sharing your glTF asset in this topic?