How to Use LoopPingPong in Three.js Animation

In Three.js, creating dynamic and realistic 3D animations often requires repeating motions in a natural cycle. This article provides a quick, step-by-step guide on how to configure a Three.js AnimationAction to use the LoopPingPong loop mode, which automatically plays an animation clip forward to the end, and then backward to the beginning, repeating this cycle continuously.

To implement a ping-pong animation in Three.js, you need to work with the AnimationMixer and AnimationAction classes. The key to achieving the back-and-forth effect lies in setting the loop behavior of your specific animation action.

Step 1: Create the AnimationMixer and Action

First, ensure you have your 3D object, the animation clip, and an active AnimationMixer. You will use the mixer to generate an AnimationAction for your clip.

// Create an AnimationMixer for your 3D object
const mixer = new THREE.AnimationMixer(myMesh);

// Get the AnimationAction for your clip
const action = mixer.clipAction(myAnimationClip);

Step 2: Configure the Action to LoopPingPong

By default, Three.js animations are set to loop repeatably from start to finish (THREE.LoopRepeat). To change this to a forward-and-backward cycle, use the .setLoop() method on your AnimationAction.

Pass THREE.LoopPingPong as the first argument, and the number of repetitions as the second argument (use Infinity for an endless loop).

// Set the loop mode to PingPong
action.setLoop(THREE.LoopPingPong, Infinity);

Step 3: Play the Animation and Update the Mixer

Once the loop mode is configured, call the .play() method to start the animation. Remember to update your mixer inside your application’s render/animation loop using a clock delta.

// Start playing the animation
action.play();

// Clock for calculating delta time
const clock = new THREE.Clock();

// In your requestAnimationFrame loop:
function animate() {
    requestAnimationFrame(animate);

    const delta = clock.getDelta();
    mixer.update(delta); // Updates the animation state

    renderer.render(scene, camera);
}
animate();

By setting the loop mode to THREE.LoopPingPong, Three.js handles the reversal of the keyframes automatically, eliminating the need to manually reverse your animation data or write custom playback logic.