threejs-loaders

name	threejs-loaders
description	Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.
type	skill
created	2026-02-27T00:00:00.000Z
domain	design-creative
category	3d-animation
risk	unknown
source	community
tags	["skill","design-creative","3d-animation","threejs","loaders"]

Three.js Loaders

When to Use

• You need to load models, textures, HDR assets, or other external resources in Three.js.
• The task involves GLTFLoader, TextureLoader, loading progress, or async asset orchestration.
• You are managing scene assets rather than authoring geometry or shaders directly.

Quick Start

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

// Load GLTF model
const loader = new GLTFLoader();
loader.load("model.glb", (gltf) => {
  scene.add(gltf.scene);
});

// Load texture
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("texture.jpg");

LoadingManager

Coordinate multiple loaders and track progress.

const manager = new THREE.LoadingManager();

// Callbacks
manager.onStart = (url, loaded, total) => {
  console.log(`Started loading: ${url}`);
};

manager.onLoad =  {
  .();
  ();
};

manager. =  {
   progress = (loaded / total) * ;
  .();
  (progress);
};

manager. =  {
  .();
};


 textureLoader =  .(manager);
 gltfLoader =  (manager);


textureLoader.();
textureLoader.();
gltfLoader.();