AnimationClip.parse()

The AnimationClip.parse() method is a static method of the Three.js library's AnimationClip class. This method is used to parse animation data from a JSON object or file.

Syntax

AnimationClip.parse(json: Object, bones: Array<Bone>): AnimationClip

Parameters

• json: An object containing JSON-formatted animation data.
• bones: An array of THREE.Bone objects used as an optional reference skeleton for the animation clip.

Return Value

A THREE.AnimationClip object.

Description

The AnimationClip.parse() method is used to parse animation data from a JSON object or file. It takes as input an object containing JSON-formatted animation data and an optional array of THREE.Bone objects that serve as a reference skeleton.

The animation data supplied to AnimationClip.parse() is expected to conform to the following JSON schema:

{
  "name": "animation-name",
  "tracks": [
    {
      "name": "bone-name",
      "times": [0, 1, 2, 3],
      "values": [0, 1, 2, 3, 4, 5, 6, 7, 8]
    },
    {
      "name": "bone-name",
      "times": [0, 1, 2, 3],
      "values": [9, 10, 11, 12, 13, 14, 15, 16, 17]
    }
  ]
}

This schema describes an animation clip with two tracks, each of which animates a different bone in the reference skeleton defined by the bones parameter.

Examples

Here is an example of how to use AnimationClip.parse() to parse animation data from a JSON file:

const loader = new THREE.FileLoader();
loader.load('animation.json', function (data) {
  const clip = THREE.AnimationClip.parse(JSON.parse(data));
  // Use the clip for animation
});

Here is an example of how to use AnimationClip.parse() with a reference skeleton:

const bones = [new THREE.Bone(), new THREE.Bone()];
const clipData = {
  "name": "animation-name",
  "tracks": [
    {
      "name": "bone-name-1",
      "times": [0, 1, 2, 3],
      "values": [0, 1, 2, 3, 4, 5, 6, 7, 8]
    },
    {
      "name": "bone-name-2",
      "times": [0, 1, 2, 3],
      "values": [9, 10, 11, 12, 13, 14, 15, 16, 17]
    }
  ]
};
const clip = THREE.AnimationClip.parse(clipData, bones);
// Use the clip and bones for animation

See Also

• THREE.AnimationClip - The THREE.AnimationClip class documentation.