threejs-gltf-loading Checked

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

let mixer;                                  // declare outside so the loop can see it
const timer = new THREE.Timer();            // THREE.Clock is deprecated since r183

new GLTFLoader().load('assets/character.glb', (gltf) => {
  scene.add(gltf.scene);
  mixer = new THREE.AnimationMixer(gltf.scene);          // one mixer per animated root
  const clip = THREE.AnimationClip.findByName(gltf.animations, 'Run')
            ?? gltf.animations[0];
  mixer.clipAction(clip).play();
});

renderer.setAnimationLoop((time) => {
  timer.update(time);
  const dt = timer.getDelta();
  if (mixer) mixer.update(dt);              // advance the animation by real seconds
  renderer.render(scene, camera);
});

### 3. Cross-fade between two clips

const actions = {};
mixer = new THREE.AnimationMixer(gltf.scene);
for (const clip of gltf.animations) {
  actions[clip.name] = mixer.clipAction(clip);
}
actions['Idle'].play();

function transitionTo(name, duration = 0.3) {
  const next = actions[name];
  next.reset().play();
  for (const [n, action] of Object.entries(actions)) {
    if (n !== name) action.crossFadeTo(next, duration, false);
  }
}

### 4. DRACO-compressed geometry

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

const draco = new DRACOLoader();
// Point at the decoder files you ship (or a pinned CDN copy of the same version).
draco.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.186.0/examples/jsm/libs/draco/');

const loader = new GLTFLoader();
loader.setDRACOLoader(draco);
loader.load('assets/city-draco.glb', (gltf) => scene.add(gltf.scene));

### 5. Find and animate a named part

new GLTFLoader().load('assets/car.glb', (gltf) => {
  scene.add(gltf.scene);
  const wheels = [];
  gltf.scene.traverse((node) => {
    if (node.name.startsWith('Wheel')) wheels.push(node);
  });
  renderer.setAnimationLoop((time) => {
    timer.update(time);
    const dt = timer.getDelta();
    for (const w of wheels) w.rotation.x += dt * 4;
    renderer.render(scene, camera);
  });
});

Pitfalls

• **Model loads but is invisible** → it has lit (PBR) materials and the scene has no

light or environment. Add a light or scene.environment (see

threejs-materials-lighting), and check scale — glTF is in metres, so a 0.01-scaled

asset is tiny.

• **load is async** → gltf only exists inside the callback; declare mixer/refs

outside and assign them in the callback, or use await loader.loadAsync(url).

• **Animation never moves** → you didn't call mixer.update(delta) each frame, or you

passed milliseconds instead of seconds (use timer.getDelta() after

timer.update(time)), or you forgot

action.play().

• **DRACO/KTX2 model fails** → the decoder/transcoder path is wrong or version-

mismatched. setDecoderPath/setTranscoderPath must point at files matching your

three.js version.

• **Multiple mixers fighting** → use **one** AnimationMixer per animated root and

create all actions from it; don't make a new mixer per clip.

• **Baked-in transforms surprise you** → exporters sometimes bake scale/rotation onto

child nodes. Dump the hierarchy (names + position/rotation/scale) before relying on

a node's local transform; re-export from the source if the rig is unusable.

• **Origins are off** → re-parent a part under a fresh Object3D to give it a clean

pivot rather than fighting baked offsets.

References

• For the full decode/transcode setup (DRACO + Meshopt + KTX2 together), loadAsync

+ a LoadingManager progress bar, reusing models with SkeletonUtils.clone, and

exporter guidance (apply transforms, one clean root), read

references/loaders-and-animation.md.

Related skills

• threejs-scene-setup — the renderer, camera, and loop this model renders into.
• threejs-materials-lighting — lighting/environment so PBR models look right.
• fps-shooter — a 3D genre that composes three.js skills.