Three.js: glTF 2.0 Morph targets model is not displayed

[cx20]

Description of the problem

I am testing glTF 2.0 sample models and Three.js glTF 2.0 Loader.
https://github.com/cx20/gltf-test/tree/2.0#simple-models-for-testing-individual-features

However, it seems that morph targets model is not displayed.

Model : Animated Morph Cube
https://github.com/HowardWolosky/glTF-Sample-Models/tree/morphAnimation/2.0/AnimatedMorphCube

Three.js + glTF Loader Result is NG
Babylon.js + glTF Loader Result is OK

Model : Animated Morph Sphere
https://github.com/HowardWolosky/glTF-Sample-Models/tree/morphAnimation/2.0/AnimatedMorphSphere

Three.js + glTF Loader Result is NG
Babylon.js + glTF Loader Result is OK

Three.js version

• [x] Dev
• [x] r85
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

ThinkPad X260 + Windows 10 + Intel HD Graphics 520

[takahirox]

GLTF2Loader doesn't support it yet but maybe we do soon #10806

[takahirox]

BTW is SimpleMaterial.gltf in your repository correct?
It doesn't seem to have a parameter corresponding to position attribute.

https://github.com/cx20/gltf-test/blob/7abbfeb846a887b7dd08adea3f631d112d0a764f/tutorialModels/SimpleMaterial/glTF/SimpleMaterial.gltf#L86-L110

[donmccurdy]

@takahirox are you started on this? I have also done a bit of work here: https://github.com/mrdoob/three.js/compare/dev...donmccurdy:feat-gltf-morphtargets

^it isn't doing anything yet, though.

[takahirox]

Yeah, I've started. Looks like our progresses are same haha.

[donmccurdy]

haha ok, we need a trello board or something 😆
I don't plan to do more for a couple days, so carry on!

[donmccurdy]

This is fixed now — if the model contains animation clips for the morph targets, they can be played as usual. If it contains morph targets alone, they are mutated with:

mesh.morphTargetInfluences[0] = 0.0;
mesh.morphTargetInfluences[0] = 0.1;
// ...
mesh.morphTargetInfluences[0] = 1.0;

[cx20]

I confirmed that the model is displayed correctly.

AnimatedMorphCube is OK
AnimatedMorphSphere is OK

[samwei12]

@donmccurdy
hi, how can I get mesh attributes from a glTF loader object?

[donmccurdy]

@samwei12 If you mean attributes like vertex positions and normals, it doesn't actually matter what loader or model format you used to create the THREE.Mesh:

result.traverse(function(node) {
  if (node.isMesh) {
    console.log(node.geometry.attributes);
  }
});

See THREE.BufferGeometry for more details.