Help with dat.gui and issues in Animation

Questions
1

I am rendering an animated 3D model from https://sketchfab.com/3d-models/hoverboard-d93296d2412b4997ae8cb96baaba5ccd 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] );

action.play();

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

actions={};



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



 var clip = animations[ i ];

 var action = mixer.clipAction( clip );

 actions[ clip.name ] = action;

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

  statesFolder.open();
  activeAction = actions['ollie'];
  activeAction.play();

 }

function fadeToAction( name, duration ) {

previousAction = activeAction;

activeAction = actions[ name ];

if ( previousAction !== activeAction ) {

    previousAction.fadeOut( duration );

}

activeAction

    .reset()

    .setEffectiveTimeScale( 1 )

    .setEffectiveWeight( 1 )

    .fadeIn( duration )

    .play();

}

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

2

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

3

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

 action.play();

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

4

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

Correctly_working
Correctly_working1925×869 178 KB
Not_working
Not_working1925×948 265 KB

How do i upload videos on this discussion ?

1 Like
5

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.