AnimationUtils.makeClipAdditive()

The makeClipAdditive() function of the AnimationUtils module in Three.js creates a new clip that represents the additive combination of two existing clips. An additive clip can be used to smoothly blend together two animations by combining their position, scale, and rotation properties in a way that prevents double-counting the shared features between the two animations.

Syntax

AnimationUtils.makeClipAdditive(baseClip: AnimationClip, referenceClip: AnimationClip, fps?: float): AnimationClip

• baseClip: The base clip that the reference clip will be added to.
• referenceClip: The clip that will be added to the base clip.
• fps: Optional frame rate used to calculate the duration of the new clip. Defaults to 30.

Example usage

import { AnimationClip, AnimationMixer, AnimationUtils } from 'three';

const mixer = new AnimationMixer(object);

const baseClip = AnimationClip.findByName(object.animations, 'baseAnimation');
const referenceClip = AnimationClip.findByName(object.animations, 'referenceAnimation');

const additiveClip = AnimationUtils.makeClipAdditive(baseClip, referenceClip);

mixer.clipAction(additiveClip).play();

Parameters

baseClip

The base clip is the animation that will serve as the foundation for the additive clip. The base clip can be any AnimationClip object that has been assigned to the animations array of a THREE.Object3D or THREE.SkinnedMesh object.

referenceClip

The reference clip is the animation that will be added to the base clip to create the additive clip. The reference clip can also be any AnimationClip object that has been assigned to the animations array of a THREE.Object3D or THREE.SkinnedMesh object. It is important to note that both the base and reference clips must have the same duration and skeleton.

fps

Optional frame rate parameter used to calculate the duration of the new additive clip. If not provided, the default value of 30 is used to compute the duration of the additive clip.

Return value

The makeClipAdditive() function returns a new AnimationClip object that represents the additive combination of the two input clips. The new clip has the same duration and skeleton as the base and reference clips used to create it.

Limitations

It is important to note that additive animations only work when the base and reference clips have the same duration and skeleton. Additionally, additive animations are not compatible with certain animation blending techniques, such as morph target animation blending, because they rely on the animation clips' position, scale, and rotation properties.

Conclusion

In conclusion, the makeClipAdditive() function of the AnimationUtils module in Three.js is a powerful tool that allows users to create new additive animation clips from existing clips. This function is incredibly useful in creating smooth blending between animations, and helps to prevent double-counting of shared features between different animation clips.