CODEWITHSUNDEEP
animationthree.js
Mario Lopes
Mario Lopes

Reputation: 135

Animation fill mode "forwards" in THREE.js

My animation is working, but when finishes, back to original. As I do to maintain the final state after the termination? like "animation-fill-mode: forwards" in Css

this.mixer = new THREE.AnimationMixer(this.box);
this.animation = this.mixer.clipAction(this.box.geometry.animations[0]);
this.animation.setDuration(1.5);
this.animation.setLoop(THREE.LoopOnce, 1);

this.mixer.addEventListener( 'finished', function() {
    this.animation.stop();
    // HOW animation-fill-mode: forwards ?
});

Upvotes: 1

Views: 304

Answers (1)

Garrett Johnson
Garrett Johnson

Reputation: 2534

You can use AnimationAction.clampWhenFinished to cause the animation to pause on the last frame once it has completed.

this.mixer = new THREE.AnimationMixer(this.box);
this.animation = this.mixer.clipAction(this.box.geometry.animations[0]);
this.animation.setDuration(1.5);
this.animation.setLoop(THREE.LoopOnce, 1);
this.animation.clampWhenFinished = true;

Hope that helps!

Upvotes: 2

Related Questions