Official misc_exporter_gltf example revisited for AnimationClip

Questions
1

I am trying to produce a simple AnimationClip example. I used the official export glTF example as a base code. Basically, I added a model of a plane exported to glTF using Three.js. The idea is to have a simple animation of the propeller and the pilot’s hair. The hair animation is just a set of boxes whose y scale is animated out of phase to replace the original sinusoidal interpolation

I think I am very close to the original animation effect. I had to use a different mixer for each box because I want a different animation for each one and not a blend of animations.

My question is: if my example is correct can I add the AnimationClip directly into the glTF file even if I need several mixers?

Thanks.

2

The exporter takes a list of AnimationClip objects, and each clip must be specific about which object it affects, since there is no concept of a ‘mixer’ in the export.

I think the easiest thing would be to give each of the boxes a unique name (‘hair01’, ‘hair02’, …) and include that name in your keyframe tracks, so you’ll have one track per hair:

const scaleKF = new THREE.VectorKeyframeTrack(
      "hair01.scale",
      [0, 1, 2],
      [1, 1, 1, 1, 0.75, 1, 1, 1, 1],
);

...

With that approach each track knows exactly which object it affects, and you don’t need more than one mixer to scope the animations to the right objects (although, it’d still be fine to have multiple mixers if you want).

3

I improved the code and broke the animation clips as you suggested

However, when I use the clips embedded in the glTF file, the hair is animated in phase as if the startAt() had been ignored. I used a flag in the code “const useAnimations = false;” that, when set to true, selects the embedded clips.

Would you have any clue why?

Thanks.

4

The .startAt() call is part of your application code and not part of the clip — you’d need to give each hairbox’s clip KeyframeTrack a different input for the keyframe times to get the same effect in the export. If all of their times / values are…

[0, 1, 2],
[1, 1, 1, 1, 0.75, 1, 1, 1, 1],

… then they’ll all be in sync.

5

I know .startAt() call is part of the application. However, I am calling “play” the same way in both cases:

clipAction
          .startAt((duration / hairsTop.children.length) * i)
          .setDuration(duration)
          .play();

Using the debugger the only difference I see in the clipAction objects is:

In the working case (usingAnimations = false):
_localRoot: null

In the embedded case ((usingAnimations = true):
_localRoot: Object { isObject3D: true, uuid: “b51eea11-d303-4723-9118-92efefffada4”, name: “mesh_13_instance_1”, … }

6

The exporter takes clips, not actions. Actions are the runtime representation only. If you want the hairboxes to animate at different times, they’ll need different keyframe tracks, with different keyframe times/values.

7

Well, I think I fixed it:

const scaleKF = (i) => {
    return new THREE.VectorKeyframeTrack(
      `hbox_${i}.scale`,
      [0, 1, 2],
      [1, 1, 1, 1, (i / numHairs) * 0.25 + 0.75, 1, 1, 1, 1],
    );
  };

The animation is completely into the glTF file. Of course, I had to set the clip action at run time.

The interesting part is that the object node being animated must have at least one child.