How to Open GLB Files in three.js

Import GLB into three.js, step by step

1. 1Check the fileA GLB is self-contained: geometry, materials and textures are inside the one file, so there is nothing else to copy.
2. 2Import into three.jsGLTFLoader from three/addons/loaders/GLTFLoader.js.
3. 3Check scale and orientationthree.js works in unitless (most scenes treat 1 unit as 1 metre) and is Y-up. GLB files are metres by convention, so they normally arrive at the right size.
4. 4Check materials and animationGLB carries PBR materials and embedded textures and can carry animation. Look at the model under a neutral light before you build on it.

What comes through

Things to watch for

• glTF is the format three.js recommends: PBR materials, skins and animation clips all work.
• 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 GLB files?

Yes. three.js opens GLB files as shipped: GLTFLoader from three/addons/loaders/GLTFLoader.js.

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

GLB files are metres by convention, 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. GLB 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.