title: How to add function on button in three js
body: <p>There is already a written program in Three JS. I'd like to add animated function on button click event.
  And how to set buttons in inner window. I want to call all animations on button click event.  Please help Thanks.</p>
  
  <p><a href="https://threejs.org/examples/#webgl_animation_skinning_morph" rel="nofollow noreferrer">The same code is in this link of three js</a></p>
  
  <p>Code is here</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;title&gt;Skinning and morphing&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
    &lt;link type="text/css" rel="stylesheet" href="main.css"&gt;
    &lt;style&gt;
     body {
      color: #222545;
     }
  
     a {
      color: #2fa1d6;
     }
  
     p {
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 2em;
     }
    &lt;/style&gt;
   &lt;/head&gt;
   
  
   &lt;body&gt;
    
   &lt;div class="btn-group"&gt;
   &lt;button id="walking" class="button" onclick=""&gt;Standing&lt;/button&gt;
   &lt;button id="Idle" class="button" onclick=""&gt;Idle&lt;/button&gt;
   &lt;button id="Standing" class="button" onclick="" &gt;Walking&lt;/button&gt;
   &lt;button id="Death" class="button" onclick="" &gt;Death&lt;/button&gt;
   &lt;/div&gt;
   
  
    &lt;script type="module"&gt;
    
  
     import * as THREE from './js/three.module.js';
  
     import Stats from './js/stats.module.js';
     import { GUI } from './js/dat.gui.module.js';
  
     import { GLTFLoader } from './js/GLTFLoader.js';
  
     var container, stats, clock, gui, mixer, actions, activeAction, previousAction;
     var camera, scene, renderer, model, face;
  
     var api = { state: 'Death' };
  
     init();
     animate();
  
     function init() {
  
      container = document.createElement( 'div' );
      document.body.appendChild( container );
  
      camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
      camera.position.set( - 5, 3, 10 );
      camera.lookAt( new THREE.Vector3( 0, 2, 0 ) );
  
      scene = new THREE.Scene();
      scene.background = new THREE.Color( 0xe0e0e0 );
      scene.fog = new THREE.Fog( 0xe0e0e0, 20, 100 );
  
      clock = new THREE.Clock();
  
      // lights
  
      var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
      light.position.set( 0, 20, 0 );
      scene.add( light );
  
      light = new THREE.DirectionalLight( 0xffffff );
      light.position.set( 0, 20, 10 );
      scene.add( light );
  
      // ground
  
      var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
      mesh.rotation.x = - Math.PI / 2;
      scene.add( mesh );
  
      var grid = new THREE.GridHelper( 200, 40, 0x000000, 0x000000 );
      grid.material.opacity = 0.2;
      grid.material.transparent = true;
      scene.add( grid );
  
      // model
  
      var loader = new GLTFLoader();
      loader.load( 'models/RobotExpressive.glb', function ( gltf ) {
  
       model = gltf.scene;
       scene.add( model );
  
       createGUI( model, gltf.animations );
  
      }, undefined, function ( e ) {
  
       console.error( e );
  
      } );
  
      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.outputEncoding = THREE.sRGBEncoding;
      container.appendChild( renderer.domElement );
  
      window.addEventListener( 'resize', onWindowResize, false );
  
      // stats
      stats = new Stats();
      container.appendChild( stats.dom );
  
     }
  
     function createGUI( model, animations ) {
  
      var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];
      var emotes = [ 'Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp' ];
  
      gui = new GUI();
  
      mixer = new THREE.AnimationMixer( model );
  
      actions = {};
  
      for ( var i = 0; i &lt; animations.length; i ++ ) {
  
       var clip = animations[ i ];
       var action = mixer.clipAction( clip );
       actions[ clip.name ] = action;
  
       if ( emotes.indexOf( clip.name ) &gt;= 0 || states.indexOf( clip.name ) &gt;= 4 ) {
  
        action.clampWhenFinished = true;
        action.loop = THREE.LoopOnce;
  
       }
  
      }
  
      // states
  
      var statesFolder = gui.addFolder( 'States' );
  
      var clipCtrl = statesFolder.add( api, 'state' ).options( states );
  
      clipCtrl.onChange( function () {
  
       fadeToAction( api.state, 0.5 );
  
      } );
  
      statesFolder.open();
  
      // emotes
  
      var emoteFolder = gui.addFolder( 'Emotes' );
  
      function createEmoteCallback( name ) {
  
       api[ name ] = function () {
  
        fadeToAction( name, 0.2 );
  
        mixer.addEventListener( 'finished', restoreState );
  
       };
  
       emoteFolder.add( api, name );
  
      }
  
      function restoreState() {
  
       mixer.removeEventListener( 'finished', restoreState );
  
       fadeToAction( api.state, 0.2 );
  
      }
  
      for ( var i = 0; i &lt; emotes.length; i ++ ) {
  
       createEmoteCallback( emotes[ i ] );
  
      }
  
      emoteFolder.open();
  
      // expressions
  
      face = model.getObjectByName( 'Head_2' );
  
      var expressions = Object.keys( face.morphTargetDictionary );
      var expressionFolder = gui.addFolder( 'Expressions' );
  
      for ( var i = 0; i &lt; expressions.length; i ++ ) {
  
       expressionFolder.add( face.morphTargetInfluences, i, 0, 1, 0.01 ).name( expressions[ i ] );
  
      }
  
      activeAction = actions[ 'Death' ];
      activeAction.play();
  
      expressionFolder.open();
  
     }
  
     function fadeToAction( name, duration ) {  //want to add this animated function on click event
     
  
      previousAction = activeAction;
      activeAction = actions[ name ];
  
      if ( previousAction !== activeAction ) {
  
       previousAction.fadeOut( duration );
  
      }
  
      activeAction
       .reset()
       .setEffectiveTimeScale( 1 )
       .setEffectiveWeight( 1 )
       .fadeIn( duration )
       .play();
  
     }
     document.getElementById("Death").addEventListener("click", fadeToAction('Death',0.5));
  
  
     function onWindowResize() {
  
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
  
      renderer.setSize( window.innerWidth, window.innerHeight );
  
     }
  
     //
  
     function animate() {
  
      var dt = clock.getDelta();
  
      if ( mixer ) mixer.update( dt );
  
      requestAnimationFrame( animate );
  
      renderer.render( scene, camera );
  
      stats.update();
  
     }
  
    &lt;/script&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>please help me how to do this. Thank you very much.</p>