Chapter 828: Loading 3D Models (Manual)

Core Idea

A general guide to choosing a model format and workflow: prefer glTF where possible, understand why only a couple of loaders ship by default, and know the basic troubleshooting steps when a loaded model looks wrong.

Key Concepts

• glTF as the default recommendation: compact and fast to load, with meshes, materials, textures, skins, skeletons, morph targets, animations, lights and cameras all supported natively; both .glb (binary) and .gltf (JSON) variants are well supported.
• Fallback formats: FBX, OBJ, and COLLADA remain available and maintained for tools that don't support glTF export.
• Only ObjectLoader ships by default: every other loader (glTF, OBJ, FBX, etc.) must be imported into your app individually from the addons directory.
• Local server requirement: many "model doesn't load" issues trace back to not serving files from a local server at all — see the Installation lesson first.
• Getting help effectively: when troubleshooting stalls, posting on the three.js forum with the actual model file (or a minimal reproduction) and a live demo gets a solution far faster than a description alone.

Code Examples

const loader = new GLTFLoader();

loader.load(
  "path/to/model.glb",
  (gltf) => scene.add(gltf.scene),
  undefined,
  (error) => console.error(error)
);

• What it demonstrates: the standard GLTFLoader.load() call shape — success callback, optional progress callback, and error callback.

Key Takeaways

1. Prefer glTF for new assets; it's the format three.js and its ecosystem are most optimized around.
2. Don't assume a loader ships with core three.js — only ObjectLoader does; everything else needs an explicit addon import.
3. Confirm you're serving files from a local server before debugging further — many loading failures are really a hosting/CORS issue.
4. When asking for help, attach the actual model (or a minimal reproduction) and a live demo link rather than just a description.

Connects To

• GLTFLoader: the recommended primary loader referenced throughout this guide.
• ObjectLoader: the one loader that ships with three.js by default.