Three.js Additive Animations and blendMode Guide

This article explains what additive animations are in 3D web development and provides a step-by-step guide on how to configure the blendMode of an AnimationAction in Three.js. You will learn how to layer multiple animations on a single 3D model to create more dynamic, realistic, and complex character movements.

What are Additive Animations?

In traditional 3D animation blending, multiple animations are interpolated based on weight. For example, if you blend a “Walk” animation and a “Run” animation with a 50/50 weight, the character moves at a medium pace that is a direct average of both states. This is known as normal blending.

Additive animations work differently. Instead of storing absolute bone positions, an additive animation stores only the difference (delta) relative to a base pose or another animation. This allows you to layer movements on top of any active base animation. For example, you can take a “Look Left/Right” additive animation and layer it on top of an “Idle”, “Walk”, or “Run” animation. The character will continue to walk or run normally while dynamically turning their head.

How to Configure blendMode in Three.js

To use additive animations in Three.js, you must change the blend mode of your specific AnimationAction from the default normal blending to additive blending. This is done using the setBlendMode() method.

Three.js provides two constants for this purpose: * THREE.NormalAnimationBlendMode (Default) * THREE.AdditiveAnimationBlendMode

Step 1: Make the Animation Clip Additive

Before you can apply the additive blend mode, the AnimationClip itself must be converted into an additive format. Three.js provides a utility tool for this called AnimationUtils.makeClipAdditive.

import * as THREE from 'three';

// Assume 'baseClip' is your default idle or walk animation
// Assume 'overlayClip' is the animation you want to make additive (e.g., a nod or wave)

// Convert the overlay clip to be additive relative to the first frame of itself (or a reference clip)
const additiveClip = THREE.AnimationUtils.makeClipAdditive(overlayClip);

Step 2: Create the AnimationAction and Set the Blend Mode

Once you have your additive clip, instantiate it through your AnimationMixer and call setBlendMode().

// Initialize the mixer
const mixer = new THREE.AnimationMixer(characterModel);

// Prepare the base animation action
const baseAction = mixer.clipAction(baseClip);
baseAction.play();

// Prepare the additive animation action
const additiveAction = mixer.clipAction(additiveClip);

// Configure the action to use Additive Animation Blending
additiveAction.setBlendMode(THREE.AdditiveAnimationBlendMode);

// Set weight and play the additive animation
additiveAction.setEffectiveWeight(1.0);
additiveAction.play();

Step 3: Update the Mixer in the Loop

To render the combined animations, update the mixer in your application’s animation loop using a clock delta.

const clock = new THREE.Clock();

function animate() {
    requestAnimationFrame(animate);

    const delta = clock.getDelta();
    mixer.update(delta);

    renderer.render(scene, camera);
}

By setting the blend mode of your secondary actions to THREE.AdditiveAnimationBlendMode, Three.js will mathematically add the node transforms of the secondary clip to the primary clip, allowing for seamless animation layering without manual bone manipulation.