Keyframe track time and value from glb

Hi. I want to control keyframe for position, rotation animation.

So, firstly I console logged my own model with animations.

I checked that when I want to put position animation, I have to make the one time value and three position value for xyz in this article

But when I look at my glb model it has 9 value for each one time value.

Should I put the 9 position value in each one time value?

and than what is 9 value means?

Hi. I want to control keyframe for position, rotation animation.

If you’re just trying to play the animation, you don’t need to extract this data from the clips. Could you say what you intend to do in more detalis than “control keyframe(s)”? The tutorial you linked to shows how to create animations from scratch. Your GLB already contains completed animations, you just have to play them.

If you do need to extract data from the clip, the reason there are 9 values is that glTF supports a “CUBICSPLINE” interpolation mode. In that case each position “value” contains three parts:

  1. input tangent, XYZ
  2. keyframe value, XYZ
  3. output tangent, XYZ

If you don’t care about the interpolation you can ignore (1) and (3). So to get the position from keyframe N, you could ignore indices 0–2 and 6–8, using only the three values at indices 3, 4, and 5. For rotation (using quaternions) there will be 12 values, representing 3 groups of 4 XYZW quaternion values.

Thanks for the reply!

Actually my main question is what is other six values except keyframe value.

Now I get it what is that six values mean.

The meaning of “control keyframes” is just put the action or delete or change the keyframe value.

Now I’m making sort of editor that can add the animation with keyframe.

Anyway I tested with just three value with no interpolation and I checked it works very well.

Sincerely, I appreciate your answer! :slight_smile:

There’s probably a longer tutorial on cubic spline animation out there somewhere, but the meaning of the other 2 x Vec3 values (input and output tangents) is defined by the glTF specification —

https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#interpolation-cubic

1 Like

Then If i want to change interpolation, then should i calculate the correct value for the interpolation my self? Or can I just change interpolation mode only?

You won’t be able to change the interpolation of a keyframe track containing input/output tangents. There is only one interpolation type that supports those tangents. Instead you could create a new keyframe track with just the values, and then change the interpolation mode as needed. Or calculate exact values for every frame (however you want) and then play that track with linear interpolation.

I think I understand 50% only sorry :smiling_face_with_tear:

I think your answer is gltf factory interpolation can’t be simply changed to linear interpolation right?

Now I’m wondering linear interpolation to THREE.InterpolateSmooth from THREE.InterpolateLinear

I think

new THREE.VectorKeyframeTrack('.position', times, posValues);

to

new THREE.VectorKeyframeTrack('.position', times, posValues, THREE.InterpolateSmooth);

is not the answer to change interpolation enough with same posValues.

I can create my own keyframe from my model but, now I wan’t to know Can I simply change it’s interpolation to smooth. :slight_smile:

The code you show above should be fine for changing between linear and smooth animation, yes.

Cubic spline animation (sometimes created by GLTFLoader) is different, it has extra values in the values array. And so to convert that keyframe track to anything else you need to remove the in/out tangents from the values array.

If you’re stuck I would recommend sharing a JSFiddle or Codepen demo so others can reproduce the problem.

Thanks!

I made the fiddle. But I can’t see any difference…

Can you check it please? :slight_smile:

You’ll need more than two keyframes for smooth interpolation to do anything, try adding a third keyframe:

  const times = [0, 3, 4];

  const posValues = [
  0,0,0,
  100,0,0,
  100,0,0
  ];
  const positionKF = new THREE.VectorKeyframeTrack('.position', times, posValues);

  const smoothPosValues = [
  0,0,50,
  100,0,50,
  100,0,50
  ];
  const smoothPositionKF = new THREE.VectorKeyframeTrack('.position', times, smoothPosValues, THREE.InterpolateSmooth);

oh got it! Thanks!! It really work!