EventDispatcher → Object3D →

AnimationPathHelper

Visualizes the motion path of an animated object based on position keyframes from an AnimationClip.

Code Example

const clip = model.animations[ 0 ];
const helper = new AnimationPathHelper( model, clip, object );
scene.add( helper );

Import

AnimationPathHelper is an addon, and must be imported explicitly, see Installation#Addons.

import { AnimationPathHelper } from 'three/addons/helpers/AnimationPathHelper.js';

Constructor

new AnimationPathHelper( root : Object3D, clip : AnimationClip, object : Object3D, options : Object )

Constructs a new animation path helper.

root

The root object containing the animation clips.
clip

The animation clip containing position keyframes.
object

The specific object to show the path for.
options

Configuration options.

Default is {}.

color

The path line color.

Default is 0x00ff00.
markerColor

The keyframe marker color.

Default is 0xff0000.
divisions

Number of samples for smooth path interpolation.

Default is 100.
showMarkers

Whether to show markers at keyframe positions.

Default is true.
markerSize

Size of keyframe markers in pixels.

Default is 5.

Properties

.clip : AnimationClip

The animation clip containing position keyframes.

.divisions : number

Number of samples for smooth path interpolation.

Default is 100.

.isAnimationPathHelper : boolean (readonly)

This flag can be used for type testing.

Default is true.

.line : Line

The line representing the animation path.

.object : Object3D

The object whose path is being visualized.

.points : Points | null

Points marking keyframe positions.

.root : Object3D

The root object containing the animation clips.

Methods

.dispose()

Frees the GPU-related resources allocated by this instance.

.setColor( color : number | Color | string )

Sets the path line color.

color

The new color.

.setMarkerColor( color : number | Color | string )

Sets the keyframe marker color.

color

The new color.

.updateMatrixWorld( force : boolean )

Updates the helper's transform to match the object's parent.

force

Force matrix update.
Overrides: Object3D#updateMatrixWorld

Source

examples/jsm/helpers/AnimationPathHelper.js