CODEWITHSUNDEEP
animationthree.jsgltf
Christian Tielmann
Christian Tielmann

Reputation: 21

Three.js - keyframe interpolation

I get some glitches when disabling objects trough setting their scale to 0.

Setup:

I got a cube with scale 1 in frame 50 & scale 0 in frame 51.

I basically use this, to disable objects in my animation (using gltf or fbx). When I'm playing the animation in three.js it seems that the keyframe is somehow interpolated. So there is a little glitch between Scale 1 & Scale 0.

Have a look here

What I tried so far:

I have the feeling that three.js is still doing some interpolations on the animations.

Does someone know a workaround for this?

Upvotes: 1

Views: 1350

Answers (1)

Christian Tielmann
Christian Tielmann

Reputation: 21

I found a solutions for my problem, but forgot to post it here ;)

So your animation has to be exported in 50 fps.

Then set your animate function to 50 fps:

function animate() {
    setTimeout( function() {
        requestAnimationFrame( animate );
    }, 1000 / 50 );
    //stats.update();
    controls.update();
    render();
}

Now you have to "turn off" the keyframe interpolation for every track using THREE.InterpolateDiscrete

gltf.animations.forEach(( clip ) => {
    for ( track in gltf.animations[ 0 ].tracks) {
        gltf.animations[ 0 ].tracks[track].setInterpolation (THREE.InterpolateDiscrete);
    }
    gltf.animations[ 0 ].tracks[0]
    const animation = mixer.clipAction(clip);
    mixer.clipAction( gltf.animations[ 0 ] ).play();
    animation.play();
});

Upvotes: 1

Related Questions