Load a 3D Model

Lesson 5

Real projects need real models. GLTFLoader handles the .glb format — the web standard for 3D assets. DRACO compression shrinks file sizes by up to 90%.

GLTFLoader

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

const draco = new DRACOLoader();
draco.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');

const loader = new GLTFLoader();
loader.setDRACOLoader(draco);

loader.load('/models/duck.glb', (gltf) => {
  scene.add(gltf.scene);
});

Loading Progress

loader.load(
  url,
  (gltf) => { scene.add(gltf.scene); hideLoader(); },
  (xhr) => { updateProgress(xhr.loaded / xhr.total * 100); },
  (error) => { console.error(error); }
);

OrbitControls

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// In animation loop:
controls.update();

What to Experiment With

  • Find free glTF models at sketchfab.com (filter: downloadable, glTF)
  • Traverse materials: gltf.scene.traverse(child => { if (child.isMesh) child.material.wireframe = true })
  • Set controls.autoRotate = true for passive viewers