GLTF anim and morph playback issue when using three.js with more than one mixer

Description of the problem

I have a single gltf file, exported from Blender with 6 anims and 20 morph targets. When that’s the only skinned gltf object in the scene, everything plays nicely – I can switch between bone anims (run, walk, idle, etc), and get all morph anims (for facial expressions) cycling on a timer, or triggered by events.

The problem is when I introduce a second skinned (and/or morphed) object, such as an NPC. At that point lots of weirdness starts to happen.

I have created a demo illustrating one of the main issues here

Also posted to SO

Please note, the morphs on the player (the caped one that looks a bit like #45 – the commader in chief not the post) cycle on ~10sec intervals. Within that time you should start to see the magical bone-warping disappearing/reappearing act played by the NPC (the guy with an untucked shirt).

Three.js version
  • Dev
  • r100
  • r98
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

1 thought on “GLTF anim and morph playback issue when using three.js with more than one mixer

  1. After loading the NPC, your code changes its material here:

    const oldMat = child.material;
    const newMat = new THREE.MeshLambertMaterial({
      color: oldMat.color, 
      morphTargets: true,
      transparent: true,
      alphaTest: 0.5,
      skinning: true,
      map: oldMat.map
    });

    I don’t think you want all of that – the mesh doesn’t have morph targets, and isn’t transparent. Setting transparency will have intended side effects, and in this case it looks like setting morphTargets:true is having unintended side effects. Removing that, the NPC is no longer affected by the Player’s morph targets.

    This bug seems only to affect meshes without morph targets rendered with a material where morphTargets=true. Setting morph targets, or even an empty array like .morphTargetInfluences = [], will also fix the issue.

    The underlying problem is tracked by #9626, so I’ll close this issue.

Comments are closed.