Integrate 3D Models and Textures with Three.js

Three.js Loaders covers loading models, textures, HDR assets, and other external resources into a Three.js scene - GLTFLoader, TextureLoader, loading progress via LoadingManager, and async asset orchestration.

Use this when loading models, textures, HDR assets, or other external resources in Three.js, working with GLTFLoader, TextureLoader, loading progress, or async asset orchestration, or managing scene assets rather than authoring geometry or shaders directly.

A LoadingManager coordinates multiple loaders and fires onStart/onProgress/onLoad/onError callbacks once every registered loader's assets finish. TextureLoader loads images with configurable colorSpace (SRGBColorSpace for color/albedo maps, LinearSRGBColorSpace for data maps like normal/roughness), wrap modes, repeat/offset/rotation, min/mag filtering, and anisotropic filtering via renderer.capabilities.getMaxAnisotropy(). CubeTextureLoader loads six-face environment maps or skyboxes; RGBELoader/EXRLoader load HDR/EXR environment maps with EquirectangularReflectionMapping; PMREMGenerator prefilters an environment map for accurate PBR reflections. GLTFLoader handles the most common web 3D format, exposing gltf.scene, gltf.animations played via AnimationMixer, gltf.cameras, and asset/user metadata, and supports Draco geometry compression via DRACOLoader with a hosted decoder path, KTX2/Basis texture compression via KTX2Loader, and Meshopt compression via MeshoptDecoder, an alternative to Draco with often better compression for animated meshes. After loading, common processing includes enabling shadows via model.traverse(), finding a named mesh with getObjectByName, adjusting material properties, and centering/normalizing scale using a Box3 bounding box. Other supported formats: OBJ+MTL (paired loaders), FBX (often needs rescaling and exposes its own animations array), STL (geometry only, needs a material), and PLY (needs computeVertexNormals() for shading).

Loaders are commonly promisified for async/await use and combined with Promise.all() to load multiple assets in parallel. THREE.Cache provides built-in caching (enabled, clear, add/get/remove), while a custom asset-manager class can dedupe loads by key, clone cached GLTF scenes per instance, and dispose all cached textures on teardown. Loaders also accept data URLs, Blob URLs revoked after use, raw ArrayBuffers parsed via loader.parse(), a custom base path via setPath()/setResourcePath(), and a LoadingManager-level URL modifier for routing requests through a CDN. Error handling patterns include falling back to a secondary URL, retrying with backoff, and aborting via AbortController on a timeout. Performance tips: use compressed formats (Draco for geometry, KTX2/Basis for textures), load progressively behind a placeholder mesh, lazy-load only what's needed, serve from a CDN, and keep THREE.Cache enabled. As of r183, VRMLLoader also supports loading cameras defined in VRML files.

Developers managing 3D asset pipelines in Three.js - loading models and textures reliably, tracking progress, handling compressed formats, and building resilient loading with caching, retries, and fallbacks - building on threejs-textures and feeding into threejs-animation and threejs-materials.