How to Open FBX Files in three.js

Import FBX into three.js, step by step

1. 1Check the fileCheck whether the FBX was exported in centimetres or metres, and whether textures were embedded or saved alongside it.
2. 2Import into three.jsFBXLoader from three/addons/loaders/FBXLoader.js.
3. 3Check scale and orientationthree.js works in unitless (most scenes treat 1 unit as 1 metre) and is Y-up. FBX files are usually centimetres, so they normally arrive at the right size.
4. 4Check materials and animationFBX carries materials and textures (often referenced externally) and can carry animation. Look at the model under a neutral light before you build on it.

What comes through

Things to watch for

• FBXLoader handles meshes and animation, but large FBX files load slower than the same model as GLB.
• Compress big models with Draco or Meshopt and load them with the matching decoder; it can cut download size several times over.

Questions

Does three.js support FBX files?

Yes. three.js opens FBX files as shipped: FBXLoader from three/addons/loaders/FBXLoader.js.

Why is my FBX model the wrong size in three.js?

FBX files are usually centimetres, while three.js works in unitless (most scenes treat 1 unit as 1 metre). Compress big models with Draco or Meshopt and load them with the matching decoder; it can cut download size several times over.

What is the best 3D format for three.js?

GLB and FBX are the most reliable choice for three.js. FBX is one of them, so you're already using a good option.

Menu names follow the three.js open-source project's current release. Check the official three.js documentation if your version differs.