Help with dat.gui and issues in Animation

I am rendering an animated 3D model from which has 3 animations and 1 static pose listed. However, on inspecting the 3D model i noticed 4 animations and 1 static pose listed [ 0 – break , 1 – default, 2 – hover , 3—ollie , 4 --turns]. Initially , i used the simple code

mixer = new THREE.AnimationMixer(gltf.scene);

var action = mixer.clipAction( gltf.animations[1] );;

where i change gltf.animations[n] manually to see the different animations and i can successfully see all the animations. However, i tried introducing dat.GUI to enable the user to change the animations and i run into an issue. When i select the first option (which is ‘break’ ) , i get a console error “Uncaught TypeError : Cannot read property ‘reset’ of undefined”.
My code in this case looks like the following:

function createGUI(model, animations){

var states = ['break','default', 'hover', 'ollie','turns'];

gui = new dat.GUI();

mixer = new THREE.AnimationMixer(model);


for ( var i = 0; i < animations.length; i++ ) {

 var clip = animations[ i ];

 var action = mixer.clipAction( clip );

 actions[ ] = action;

 // states
 var statesFolder = gui.addFolder( 'States' );
 var clipCtrl = statesFolder.add( api, 'state' ).options( states );
 clipCtrl.onChange( function() {
 fadeToAction( api.state, 0.5 );
 } );;
  activeAction = actions['ollie'];;


function fadeToAction( name, duration ) {

previousAction = activeAction;

activeAction = actions[ name ];

if ( previousAction !== activeAction ) {

    previousAction.fadeOut( duration );




    .setEffectiveTimeScale( 1 )

    .setEffectiveWeight( 1 )

    .fadeIn( duration )



Not sure why manually selecting the first option from the GUI seems to not work in my case. Any help in understanding is highly appreciated

Any chances to demonstrate the issue with a live example or GitHub repository?

Uploaded a zipped folder to better explain my question. On inspecting the scene.gltf file, i can see ‘break’ under animations but when i select that option from the controls, i see errors in the console. However, if i manually write code

 mixer = new THREE.AnimationMixer(gltf.scene);

 var action = mixer.clipAction( gltf.animations[0] );;

where gltf.animations[0]—> break, i can see the animation playing out. This somehow breaks when i use dat.GUI

Having issues with uploading the demo video but attaching pictures and hoping its helpful

How do i upload videos on this discussion ?

1 Like

So the problem is that whatever value you’re passing to fadeToAction isn’t actually part of the actions object.

in fadeToAction, log the name parameter, I bet it’s undefined. Start there.

I just fixed this in my own app.