Fetching Bones from Binary .FBX File

Questions
, ,
1

Hi All,

I have a binary .fbx file that depicts some dancers. If I load the file into Blender, I can see that the file depicts skeletons for the dancers. However, when I load it into a THREE scene here nothing is depicted.

What’s also strange is that after using Facebook’s FBXtoGLTF converter to convert the .fbx file to GLTF, I was able to load and visualize the scene in THREE, but I can’t seem to find any bone information anywhere–I only see individual vertex positions. The relevant mesh on the linked site is scene.children[4].

Does anyone know how I can retrieve the bone information in the .fbx file in the first link above? Any help others can offer would be hugely appreciated!

2

You can render bones of your animation by using the Skeleton Helper class. It iterates through your mesh and draws all the bones as blue>green lines. In the example below you can see it working by toggling the ‘show skeleton’ option.

https://threejs.org/docs/#api/en/helpers/SkeletonHelper

https://threejs.org/examples/webgl_animation_skinning_blending

3

Thanks for your note @calrk! I’m almost certainly doing something wrong.

I added the skeleton boilerplate to the code linked above. The result is the following model loading business:

// model
var loader = new THREE.GLTFLoader();
loader.load('dancer.glb', function(gltf) {
  var model = gltf.scene,
      nodes = [],
      geometry = new THREE.SphereBufferGeometry(0.02),
      material = new THREE.MeshStandardMaterial({ color: 0xff0000, metalness: 0 });
  model.traverse(function(o) { nodes.push(o) });
  nodes.forEach(function(o) {
    if (!o.name.includes('System') && !o.name.includes('Unlabeled')) {
      o.add(new THREE.Mesh(geometry, material));
    }
  });

  // add skeleton
  skeleton = new THREE.SkeletonHelper( model );
  skeleton.visible = true;
  scene.add( skeleton );

  // scale and rotate the model
  model.scale.set(30, 30, 30);
  model.rotation.x = Math.PI / 2;
  scene.add(model);
})

This adds a skeleton to the scene, but it doesn’t contain any bones. Do you know how I can dig out the bone information? I’d be happy to use either the fbx or the glb files linked above.

Any suggestions are welcome!

4

Hmm yeah I expected the ‘bones’ array of the SkeletonHelper to contain the bone information you were looking for. That being empty implies there are no bones and when I take a look at the glb model I couldn’t see any.

I’m not too sure how the importers/exporters work, but its possible it detects there is no skin attached to the mesh, so just uses the standard Object3Ds to create your scene graph? Could try adding a skin to your model and see if that helps?

5

@calrk thanks for following up.

It seems safest to me to work with the fbx file, as that’s the raw file I have (it comes from Shogun Live, a motion capture software product).

It’s possible the .fbx -> .glb conversion process with the Facebook binary is dropping the bones.

If you open the .fbx file in Blender (or likely any of the Autodesk products), you should see the bones. Is there a way to export from Blender in such a way as to make it easy to render the mesh + bones in three.js?