Model loading guide

Three.js GLTFLoader Example

GLB and GLTF are common formats for web 3D. A clean loader setup should load the asset, add it to the scene, fit the camera, and handle animations when they exist.

Before coding: Drop the model into the GLB Viewer to check scale, bounds, vertex count, and whether the model contains animations.

Basic GLTFLoader code

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

const loader = new GLTFLoader();
let mixer = null;

loader.load(
  "/models/product.glb",
  (gltf) => {
    const model = gltf.scene;
    scene.add(model);

    const box = new THREE.Box3().setFromObject(model);
    const center = box.getCenter(new THREE.Vector3());
    camera.lookAt(center);

    if (gltf.animations.length) {
      mixer = new THREE.AnimationMixer(model);
      mixer.clipAction(gltf.animations[0]).play();
    }
  },
  (event) => {
    const loaded = event.loaded / event.total;
    console.log(`Loaded ${Math.round(loaded * 100)}%`);
  },
  (error) => {
    console.error("GLTFLoader failed", error);
  }
);

const clock = new THREE.Clock();

function animate() {
  const delta = clock.getDelta();
  if (mixer) mixer.update(delta);
  renderer.render(scene, camera);
}
Open GLB Viewer

GLB loading checklist

Use the addon import

Import GLTFLoader from three/addons/loaders/GLTFLoader.js when using modern Three.js packages.

Fit the camera after load

The model bounds are only known after the loader callback receives gltf.scene.

Check animations

GLB files can include clips. Use AnimationMixer only when gltf.animations contains at least one clip.

Light the material

Many imported materials look flat until tone mapping, key light, fill light, and environment lighting are in place.

Common GLTFLoader problems

  • White or black model: add lights and check color management.
  • Model missing: inspect network path and browser console errors.
  • Model too large or tiny: measure Box3 bounds and fit the camera.
  • Animation not playing: create AnimationMixer and update it every frame with clock delta.

FAQ

Should I use GLB or GLTF?

GLB is a single binary file, which is convenient for uploads and static hosting. GLTF can reference separate texture and binary files.

Can I load local files in a static site?

Yes. Use a file input and URL.createObjectURL so the browser can load the selected file without uploading it to a server.

Why does my GLB look different from Blender?

Lighting, environment maps, tone mapping, color space, and material settings can differ between Blender and the browser.

Related Three.js Lab pages

Local GLB Viewer Fit Camera to Object Lighting Presets

Sources