FBXLoader problems: .fbx doesn't always load and it doesn't load materials

Questions
1

Here’s the code in my React app:

import React from 'react';
import * as THREE from 'three'; // 0.103.0
import FBXLoader from 'three-fbxloader-offical'; //1.0.0
// import FBXLoader from 'three-fbx-loader'; //1.0.3

loadFBX = source => {
    const onLoad = function(object) {
      object.name = 'ad';
      object.position.set(0, 0, 0);

      if (object.animations[0]) {
        this.mixer = new THREE.AnimationMixer(object);
        const action = this.mixer.clipAction(object.animations[0]);
        action.play();
      }

      this.scene.add(object);
    }.bind(this);

    const onLoading = xhr => {
      console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
    };

    const onLoaderError = error => {
      console.error(error);
    };

    const loader = new FBXLoader();
    loader.load(source, onLoad, onLoading, onLoaderError);
  };

Sometimes the files don’t load and it throws this error:

image

with this file: Lowpoly_tree_sample.fbx (91.0 KB)

And with others it loads, but it looks all black:

image
image1647×630 46.4 KB

With this file: dragon.fbx (2.6 MB)

Same with another file:

image
image1647×678 38.3 KB

File: 87194c3334d8d227.fbx (204.4 KB)

What I’m I doing wrong :confused:?

2 
import FBXLoader from 'three-fbxloader-offical'; //1.0.0
// import FBXLoader from 'three-fbx-loader'; //1.0.3

Unfortunately these are very out of date and not maintained by us - it’s just random people on NPM who have created these packages. I’ve reached out to them asking them to make it clear that they’re out of date, but had no response.

You’ll need to get the loader from the three.js repo here:

It’s not a module, but it’s pretty easy to convert it to one and there’s lots of info here on the forum on how to do that if you search.

2 Likes
3

I am using three.js fbx loader, [https://free3d.com/3d-model/chest-50529.html](http://fbx model)
trying to render fbx model, but it is getting render without textures.

chestFbxModel
chestFbxModel765×437 18.3 KB

code :

		    	var loader = new FBXLoader();
				loader.load( 'chestfinally/Models/chest.fbx', function ( object ) {
					scene.add( object );
				} );
4

When I load the model in FBX Review there are no textures either:

sss
sss890×607 17.1 KB

The textures are included separately in the textures/. I haven’t checked to confirm this, but it seems like the textures are not correctly referenced in the FBX file. This is pretty common when downloading files from free model sites like this one.

You have two options: either load up the textures separately and manually apply them to the model, or open the FBX file in a modelling program and fix it.

1 Like
5

do we have any documentation on how fbx file should be created, like in structure wise, so that three.js FBXloader can render the file without breaking??

6

If you import it into any modelling program (such as Blender, 3DS Max), set up the materials, then export it, it should work (animations may take extra work). You may need to check the documentation for the program to see which materials safely export. I would say that the problem in that free3D.com uses a custom FBX exporter that doesn’t handle textures properly. Or maybe the person who uploaded it did not set it up correctly.