glTF 2.0 animation not working

Question

I'm trying to experiment a little with glTF 2.0 models with animation. Unfortunately, when i try to update the THREE.animationMixer, I get a warning:

THREE.Matrix3: .getInverse() can't invert matrix, determinant is 0.

Here's the setup:

The model:
I'm no 3D artist, so i've made a cube + torus in blender.
Also there are two actions in the Action Editor, moving the torus in two different ways.

You can download the .blend, and .glTF from here.

I think the export worked fine, since the model + animation are working in Don McCurdy's glTF viewer.

The Code:
I've tried using either Don McCurdy animation-mixer, or mixing Three.js into an a-frame component:

AFRAME.registerComponent("foo", {
  init: function() {
    var el = this.el;
    setTimeout(()=>{
      var model = el.getObject3D('mesh')       
      this.mixer = new THREE.AnimationMixer(model);
      var clips = model.animations || (model.geometry || {}).animations || 
      [];
      console.log(this.mixer)
      console.log(el)
      console.log(clips[0])
      const action = this.mixer.clipAction(clips[0], model);
      action.setDuration(100).setLoop(THREE.LoopRepeat).play();
      console.log(action)
    }, 2000)
  },
  tick: function (t, dt) {
    if (this.mixer && !isNaN(dt)) this.mixer.update(dt / 1000);
  }
})

This code is basically a ripoff of Don's Loader. The only object that should be moving, the torus, dissapears, with the mentioned error, when I add the mixer.update part. Nothing logs as undefined, so the objects are created properly. Furthermore, the animation-mixer behavior is the same (i guess no surprise, since i just took part of it).

Any ideas what could be causing the problem ? I may be missing something, but i have no clue how to troubleshoot this.

on my phone and can’t see it right now but cubic bezier interpolation is broken in older versions of THREE, which aframe still uses. Switching to linear interp in blender may fix it — Don McCurdy
thank You very much, nice catch, I've got one follow up, the animation seems to end and repeat at ~180th frame (tried on two different moving cubes), is there a hidden limitation or sth ? — Piotr Adam Milewski
No limitation i'm aware of, but does one of your Actions stop at 180? The Blender exporter doesn't handle multiple actions yet, and merges them, so maybe that's why. For the cubic bezier interpolation, going to A-Frame master branch might also fix it. — Don McCurdy
@DonMcCurdy You're right, it stops at one of the keyframes, in both cases last but one, i've read about the exporter not working for multiple animations here but in my cases i have only one action. Will try to find more correlations tomorrow, to provide more info, or make a new question — Piotr Adam Milewski
May also want to compare results with github.com/Kupoman/blendergltf — Don McCurdy

Don McCurdy Don McCurdy · Accepted Answer · 2018-02-15T00:56:54

Cubic bezier interpolation is broken in older versions of THREE (pre r87-r88 or so), which A-Frame 0.7.0 still uses. Switching to linear interpolation in Blender would work around this, or using the A-Frame master branch.

You also mention two actions in the Action Editor, which would be merged during export because multiple actions are still in progress for the Khronos glTF Blender exporter.

If that doesn't work, there is also another glTF Blender exporter to try: https://github.com/Kupoman/blendergltf/

glTF 2.0 animation not working

1 Answers