glTF - Skinned Mesh not displayed

Questions
1

I am working on a project were I have examples of real time deformations with ThreeJS. I am creating objects in Blender and export them with the glTF-Exporter to glTF and then import them into ThreeJS and display them. This works perfectly fine with normal models and models with morph targets, but if I add an armature in Blender and export it with the Blender glTF-Exporter, no object is rendered in ThreeJS. The object is there and is logged like this:
importedObjectInThreeJS
The positioning seems to be right. I let the camera rotate and it wasn’t rendered anywhere.
The 3D-Object is correctly rendered in online glTF-Viewers and the VSCode glTF-Add-on. Also the bones are shown there correctly.

I am loading the models like that:

import GLTFLoader from 'three/examples/js/loaders/GLTFLoader';
loadModel(modelName, gltfPath) {
    return new Promise((resolve, reject) => {
      this.loader.load(gltfPath, gltf => {
        let objectWrapper = new THREE.Object3D();
        objectWrapper.add(gltf.scene);
        this.models.set(modelName, objectWrapper);
        return resolve();
      });
    });
  }

Any ideas why 3D-Objects with bones are not rendered in my scene?

2

Can you please share your glTF file in this thread?

3

beard-arm.zip (406.3 KB)

Here is the glTF File.

4

The glTF files look good to me. There must be a problem in your code. Is it possible for you to reproduce the issue in a live example? You can place the glTF files in a github repo and load them from the demo code like shown in the following fiddle:

https://jsfiddle.net/f2Lommf5/15148/

5

Yeah the model looks OK to me, strange that it’s working in my viewer but not your code. I do some automatic calculation of camera parameters and resize/center the model but that’s about it.

One other thought would be to “Apply” location and scale on the mesh before export, and perhaps un-nest it a bit. https://blender.stackexchange.com/questions/87499/how-do-you-apply-the-object-transform-so-that-scaling-the-object-on-a-single-axi. That should simplify the effects of the skinning a little.

6

In my project I place the objects based on the data of a face detection on the faces of people in front of the camera. The objects are positioned and rotated, so that they fit on the heads. This is working for all models, but models I export with bones. I think this will be hard to reproduce, but I will try.

7

Thank you. I will definitely try this later.

8

applying location and scale didn’t help.

9

Got it, yeah that’s very possibly related but understandably harder to reproduce. What’s the rough scale of transform you’re applying? Note that large scales or offsets (say 1000+?) can introduce their own issues depending on configuration. I assume you’re transforming the whole model as a unit, not just one descendant of the Object3D above?

10

Here is an example position:

x:  -0.09458062862592481
y:   0.07289246209491909
z:  -0.3423817540563959

and rotation (order = XYZ)

x: 0.2417480690474454
y: -0.15893181824371988
z: -0.07082839871389104

scale is (1, 1, 1)

The camera is created with:
camera = new THREE.PerspectiveCamera(78.5, 1080/1920, 0.01, 100)
so the camera is positioned on (0,0,0)

11

The Import:

  this.loader.load(gltfPath, gltf => {
    this.addCurrEnvMapToGltf(gltf.scene);
    let objectWrapper = new THREE.Object3D();
    objectWrapper.add(gltf.scene);

The objectWrapper is than positioned with position.set(…)

12

I change the code so object are placed on (0,0,-1) instead of the face data position and all models are displayed there, but not those with bones. I don’t understand what’s different with them.

13

As I said before, it might be better to provide a live example with your code for debugging. Otherwise, it will be hard to provide further useful input.

14

Yes, you are right. I will try next week. Right now I tried to export it in obj and COLLADA and convert it to glTF, but is was still not shown, so it has to be something with my code.