Load fbx file with textures (including images)

I have a simple example github.com/nxhoang/Three.js-Fxb-and-Textures.
I would like to open fbx with its textures.
I’m newbie in WebGL and three.js so please help me, thanks a lot.

You can use this example as a starter template: https://threejs.org/examples/#webgl_loader_fbx

If your model has no animations, you can just add the object to the scene like this:

loader.load( 'models/fbx/myModel.fbx', function ( object ) {

    scene.add( object );

} );

The .load() function takes several arguments including callbacks for when the model is loaded and when there is an error. Because no error callback is given, it does not print anything when it runs into trouble. To fix that:

loader.load( 'models/fbx/myModel.fbx', function ( object ) {

    scene.add( object );

}, undefined, function ( e ) {

  console.error( e );

} );

With that, in your JS console you’ll see the following error:

webgl_loader_fbx.html:128 Error: THREE.FBXLoader: Unknown property type 
    at BinaryParser.parseProperty (FBXLoader.js:3188)
    at BinaryParser.parseNode (FBXLoader.js:2941)
    at BinaryParser.parse (FBXLoader.js:2887)
    at THREE.FBXLoader.parse (FBXLoader.js:78)
    at Object.onLoad (FBXLoader.js:53)
    at XMLHttpRequest.<anonymous> (three.js:30803)

The type of the property appears to be missing. That sounds invalid to me, but opening the file in FBX Review or converting with FBX2GLTF and then loading with THREE.GLTFLoader both work, so maybe it is a bug in THREE.FBXLoader?

In GLTFLoader:

26%20PM

Dear @donmccurdy,
Is FBX2GLTF an application for converting?
How can convert with javascripts only?

FBX2glTF is a free command-line tool for converting FBX to glTF. You would need to install it and run the conversion beforehand. Conversion with JavaScript is sometimes possible, but if THREE.FBXLoader cannot load your model above, that is not going to work.

Thanks @donmccurdy so much. However, this way is not my expectation. I want users to upload fbx file (including textures) via my site then they can see in my site so we can’t require users converting the file.

In that case I think you will need to report a bug on three.js, so that whatever is breaking this particular file can be fixed. Unfortunately FBX files can be quite inconsistent, you may see other issues from other FBX files uploaded by your users.

Dear @donmccurdy,
I converted to .glb file (just one file github.com/nxhoang/Three.js-Fxb-and-Textures/tree/master/models). However, I don’t know how to open it as you said.
Could you post your code?
I took a look at three.js examples. There are many files. However, they don’t include .glb file in code.

The simple way to verify conversion worked is by dragging the file into https://gltf-viewer.donmccurdy.com/.

If that works, you can use GLTFLoader like in this example. GLTFLoader supports both .gltf and .glb files the same way.

Thanks @donmccurdy so much. It works now. However, I want to display my fbx file.
I will research further.

Dear sir,
Could you help me to open my fbx file with textures?

@nxhoang the file is an old version of the format - FBX 2013 (6100). We don’t fully support that version. Some models may work, some may not.

The best thing to do is to re-export the model in a newer version of the FBX format, or convert it into a different format such as glTF.

Thanks @looeee for replying, are there a way to convert my fbx file to another extension by javascripts then load it by three.js?

Dear all,
I tried another fbx file github.com/nxhoang/Three.js-Fxb-and-Textures/blob/master/models/fbx/Test.fbx
And show me another error: ReferenceError: Zlib is not defined.
I can open both fbx files in viewer.autodesk.com/designviews
So I guess there are another way to open my fbx files by Three.js.

You need to include the Inflate.min.js script.
See the FBX example for details on how to include that file.

Dear @looeee,
I included Inflate.min.js script then it shows me another error image

I haven’t been able to track down the error on this so far. Again, I suspect it’s due to an incompatible file - the version number is now fine on this, but the creator shows as “FBX SDK 2011”.

What program are you exporting this from?

If I import to 3ds max and then re-export the model loads fine by the way.

1 Like

Dear @looeee,
I used “Paint 3D” that’s MS’s application in Win 10 to re-export the file.

Interesting, never noticed that you could save as FBX from Paint 3D.

I’ve tested saving a couple simpler models that way, and they work fine.

However, FBX files I save from Paint 3D are version 7400, and FBX SDK 2017.

Can you make sure that you have the latest version of Paint 3D? Mine is version 4.1804

I tried re-exporting by Paint 3D (Mine is also version 4.1804). It’s working fine now.
My task is opening FBX files were created by Optitex 3D (ver 15.3). Unfortunately, I can’t ask users using Paint 3D to convert the files. However, Optitex 3D (ver 15.3) is able to save as .obj format. How is about loading .obj by three.js, does it support all of versions? I’ve never tried that. I’m planning to do this next week?