# Play Animation on click GLTF

**URL:** <https://discourse.threejs.org/t/play-animation-on-click-gltf/16441>\
**Category:** Questions\
**Tags:** javascript\
**Created:** [June 22, 2020, 1:00pm UTC](https://discourse.threejs.org/t/play-animation-on-click-gltf/16441 "2020-06-22T13:00:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [June 22, 2020, 1:00pm UTC](https://discourse.threejs.org/t/play-animation-on-click-gltf/16441/1 "2020-06-22T13:00:31Z")

</div>

Hi I am trying to play an animation on click so far the Idle animation is playing fine but I can’t seen to get the walking animation to play on a click, what Am I doing wrong?

Snippet:

```
 //Load
                   var action, model2, mixer2, clock, gltf2;
                    loader.load('scene.gltf', function(gltf2) {
	             model2 = gltf2.scene;
	            gltf2.scene.traverse(function(child) {
	                if (child.isMesh) {
	                    roughnessMipmapper.generateMipmaps(child.material);
	                }
	            });
	           
	            scene.add(model2);
	            roughnessMipmapper.dispose();
	            
               //Play Idle
                mixer2 = new THREE.AnimationMixer( model2 );
		action = mixer2.clipAction( gltf2.animations[0] );
		action.play();
	            
	          
	        });
	         //Load end
             
               //Click 
               function onClick() {
                
                    if (intersects[0].object.name == 'CharacterOne') {
              $('body').css('cursor', 'default');
             
	    mixer2 = new THREE.AnimationMixer( model2 );
		action = mixer2.clipAction( gltf2.animations[1] );
		action.play();

           }
      }

```

> Uncaught TypeError: Cannot read property ‘animations’ of undefined  
> at HTMLCanvasElement.onClick

---

<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:** [June 22, 2020, 1:51pm UTC](https://discourse.threejs.org/t/play-animation-on-click-gltf/16441/2 "2020-06-22T13:51:07Z")

</div>

It seems your `onClick` event listener has no acess to the `gltf2` variable. Try to declare it in global scope so it’s reachable for all lines of code that refer to it.

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [June 22, 2020, 5:28pm UTC](https://discourse.threejs.org/t/play-animation-on-click-gltf/16441/3 "2020-06-22T17:28:14Z")

</div>

How Would I define function(gltf2) as a var ?  
gltf2 = gltf2.scene; ?  
I did try:  
model2.animations[1] but that didn’t work and model2 is global

---

<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:** [June 22, 2020, 5:40pm UTC](https://discourse.threejs.org/t/play-animation-on-click-gltf/16441/4 "2020-06-22T17:40:46Z")

</div>

Do it like so:

```auto
loader.load('scene.gltf', function(gltf) {

    gltf2 = gltf;

```

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [June 22, 2020, 6:57pm UTC](https://discourse.threejs.org/t/play-animation-on-click-gltf/16441/5 "2020-06-22T18:57:40Z")

</div>

I’ve changed a bit to

```
    var gltfPlayer, model, model2, mixer, mixer2, action;
    //Loader 2
     model2 = gltf2.scene;
     gltfPlayer = gltf2;
    mixer2 = new THREE.AnimationMixer( model2 );
    		action = mixer2.clipAction( gltf2.animations[0] );

```

It works perfectly now on click but it seems to of stopped my windmill from playing

```
     mixer = new THREE.AnimationMixer(model);
    	            gltf.animations.forEach((clip) => {
    	                mixer.clipAction(clip).play();
    	            });

```

Any idea’s?

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [June 22, 2020, 7:12pm UTC](https://discourse.threejs.org/t/play-animation-on-click-gltf/16441/6 "2020-06-22T19:12:42Z")

</div>

I Needed another clock my mistake! thanks