AnimationUtils.flattenJSON()

Three.js 是一个广泛使用的 WebGL 库，其中 AnimationUtils.flattenJSON() 函数是其中一个非常实用的函数，可用于扁平化三维模型的动画信息。

语法

AnimationUtils.flattenJSON(json, target)

• json: 即将要被扁平化的 json 对象。
• target: 扁平化后的结果将被放入其中。

返回值

无。结果将被存储在 target 对象中。

描述

AnimationUtils.flattenJSON() 函数将给定的 json 对象扁平化为一系列数据，使得它们可以在 GPU 上进行快速的动画播放。该函数主要包括以下三个步骤：

1. 遍历给定的 json，将其动画信息的层次结构拉平成一维数组。
2. 重新计算每个关键帧的时间戳，使其在开始时间为 0 的情况下相对于前一帧时间。
3. 将所有不能被 GPU 直接处理的属性（比如颜色值、Matrix、Vector 等）经过转换，转换成可由 GPU 处理的值。

AnimationUtils.flattenJSON() 函数生成的扁平化数据可以被用于构建 AnimationMixer 。AnimationMixer 对象是主要的动画调度器，用于控制和播放多个 AnimationAction 对象，并将他们同步到同一个时间基准（即将动画应用到对象的最终输出）上。

示例

以下是使用 AnimationUtils.flattenJSON() 函数扁平化 json 数据的示例代码：

let json = {
  "animations": [
    {
      "tracks": [
        {
          "name": ".position",
          "type": "vector",
          "keys": [
            { "time": 0, "value": [0, 0, 0] },
            { "time": 1, "value": [0, 10, 0] }
          ]
        },
        {
          "name": ".rotation",
          "type": "quaternion",
          "keys": [
            { "time": 0, "value": [1, 0, 0, 0] },
            { "time": 1, "value": [0, 0, 1, 0] }
          ]
        }
      ]
    }
  ]
};

let target = {};
AnimationUtils.flattenJSON(json, target);

在上面的例子中，我们将 json 对象传递给 AnimationUtils.flattenJSON() 函数，并将结果存储在 target 对象中。

注意事项

1. AnimationUtils.flattenJSON() 函数只能用于模型的动画信息扁平化，无法扁平化模型的几何信息。

2. 在调用 AnimationUtils.flattenJSON() 函数之前，请确保 json 对象中包含有效的动画信息。

3. 在使用扁平化数据构建 AnimationMixer 前，请务必进行必要的数据检查以确保其正确性。