Load 3D assets in Three.js - GLTF/GLB models, textures, and HDR environments - with LoadingManager progress tracking, correct color space, and async load patterns.
---
name: threejs-loaders
description: Reference for loading assets in Three.js - GLTFLoader, TextureLoader, HDR environments, and LoadingManager progress. Use when loading models, textures, or tracking load state.
---
Patterns for loading and configuring 3D assets in Three.js.
## How to use
1. Load models with `GLTFLoader` from `three/addons/loaders/GLTFLoader.js`; add `gltf.scene` to your scene in the onLoad callback.
2. Coordinate multiple assets with a single `THREE.LoadingManager`, wiring `onProgress` to a progress bar and `onLoad` to start the app only when everything is ready.
3. Load textures via `TextureLoader`; set `colorSpace = THREE.SRGBColorSpace` for albedo maps and linear for data maps (normal/roughness), plus wrapping and `repeat`/`offset`.
4. Use the loader callbacks (onLoad/onError) to diagnose failures, and remember image loads don't report fine-grained progress.
Full skill & source: https://github.com/CloudAI-X/threejs-skills/tree/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-loaders