threejs-gltf-loading

three.js glTF Loading

Load .gltf/.glb models and play their animations in three.js, including compressed geometry (DRACO/Meshopt) and textures (KTX2). Patterns target r184; preserve an existing project's pinned release unless migration is requested.

When to use

• Use to import a 3D model, add it to the scene, inspect its node hierarchy, and play baked/skinned animation clips with an AnimationMixer.
• Use when files are .gltf/.glb, or code imports GLTFLoader / DRACOLoader / KTX2Loader from three/addons/loaders/....

When not to use: creating the renderer/camera/loop → threejs-scene-setup. Tuning surface look, lights, or shadows on the loaded model → threejs-materials-lighting. Authoring/exporting the model itself (Blender) is out of scope; prefer glTF over OBJ/FBX for runtime.

Core workflow

1. Why glTF. It's a transmission format: binary vertex data, PBR materials, and animations are ready to render with minimal parsing. Prefer it over OBJ (no scene graph, no animation) and FBX (heavy) for the web.
2. Load with GLTFLoader. loader.load(url, onLoad, onProgress, onError). The result gltf has gltf.scene (the Object3D root), gltf.animations (AnimationClip[]), gltf.cameras, and gltf.asset.
3. Add gltf.scene to your scene and frame it. Inspect the hierarchy with traverse / getObjectByName to find the parts you'll control.
4. Play animations with an AnimationMixer. One mixer per animated root; mixer.clipAction(clip).play(); advance with mixer.update(delta) every frame.
5. Decode compressed assets. Attach a DRACOLoader (and/or KTX2Loader + Meshopt) so DRACO meshes and KTX2 textures load; point the decoders at their files.
6. Verify what loaded — log the scene graph and gltf.animations, and confirm the model is visible (right scale, lit) and the clip actually plays.

Patterns

1. Load a model and frame it

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load(
  'assets/robot.glb',
  (gltf) => {
    const root = gltf.scene;
    scene.add(root);
    // Inspect: gltf.animations is an array of AnimationClip.
    console.log('clips:', gltf.animations.map((c) => c.name));
  },
  (event) => console.log(`${(event.loaded / event.total) * 100}% loaded`),
  (error) => console.error('glTF load failed:', error)
);