Asset Pipeline

The Asset Pipeline encompasses the import and export systems for 3D models, textures, and scene data. This includes loaders for various file formats (glTF, FBX, OBJ, etc.), texture loading with compression support, and exporters for serializing scenes back to standard formats. The pipeline provides a unified interface for loading external assets into Three.js scene graphs and materials.

For information about procedural geometry generation, see Procedural Geometries. For serializing complete scenes with the ObjectLoader/toJSON system, see Scene Serialization.

System Architecture

The asset pipeline is built on a shared infrastructure of base classes and utilities that all loaders extend. This provides consistent behavior for path resolution, progress tracking, error handling, and resource caching.

Core Infrastructure

100%

The Loader base class (src/loaders/Loader.js) provides common properties for all loaders:

Property	Type	Purpose
manager	LoadingManager	Tracks loading progress across multiple assets
crossOrigin	string	CORS setting for image loading
withCredentials	boolean	Whether to send credentials with requests
path	string	Base path prepended to all URLs
resourcePath	string	Path for resolving dependent resources
requestHeader	Object	Custom HTTP headers

Format Support Matrix

Three.js provides loaders for a wide range of 3D file formats, each with different capabilities and use cases:

Format	Loader Class	Features Supported	Primary Use Case
glTF 2.0 (.gltf/.glb)	GLTFLoader	Meshes, materials (PBR), textures, animations, skins, morph targets, lights, cameras, 20+ extensions	Modern asset delivery, game engines, AR/VR
FBX (.fbx)	FBXLoader	Meshes, materials (Phong/Lambert), textures, animations, skins, morph targets, cameras, lights	DCC tool interchange (Maya, 3ds Max)
OBJ/MTL (.obj/.mtl)	OBJLoader/MTLLoader	Meshes, materials (Phong), textures	Simple model interchange, legacy format
STL (.stl)	STLLoader	Meshes, vertex colors (binary), multiple solids (ASCII)	CAD, 3D printing
PLY (.ply)	PLYLoader	Meshes, vertex colors, normals, custom attributes	Point clouds, scan data
3MF (.3mf)	ThreeMFLoader	Meshes, materials (base + PBR), textures, vertex colors	3D printing, Microsoft 3D ecosystem
EXR (.exr)	EXRLoader	HDR textures, multiple compression modes	HDR environment maps, render passes
PCD (.pcd)	PCDLoader	Point clouds, RGB, normals, intensity	LiDAR, robotics
NRRD (.nrrd)	NRRDLoader	Volume data (medical imaging)	Medical visualization

glTF Loader System

The GLTFLoader is the most sophisticated loader in Three.js, implementing the glTF 2.0 specification with extensive extension support. It uses a plugin architecture to handle extensions and compression.

GLTFLoader Architecture

100%

Extension System

The GLTFLoader registers extension plugins at construction time and provides a register() method for third-party extensions. Extensions are queried during parsing to handle specific glTF extension data.

100%

Extension Registration:

The loader supports 20+ extensions, registered in the constructor examples/jsm/loaders/GLTFLoader.js141-248:

• Material Extensions: KHR_materials_clearcoat, KHR_materials_transmission, KHR_materials_volume, KHR_materials_ior, KHR_materials_specular, KHR_materials_iridescence, KHR_materials_sheen, KHR_materials_anisotropy, KHR_materials_dispersion, KHR_materials_emissive_strength, KHR_materials_unlit, EXT_materials_bump
• Texture Extensions: KHR_texture_basisu, EXT_texture_webp, EXT_texture_avif, KHR_texture_transform
• Compression: KHR_draco_mesh_compression, KHR_meshopt_compression, EXT_meshopt_compression
• Other: KHR_lights_punctual, KHR_mesh_quantization, EXT_mesh_gpu_instancing

Setting Up Compression Loaders

// Configure DRACO decoder for mesh compression
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/jsm/libs/draco/' );
gltfLoader.setDRACOLoader( dracoLoader );

// Configure KTX2 decoder for texture compression
const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath( '/examples/jsm/libs/basis/' );
gltfLoader.setKTX2Loader( ktx2Loader );

// Configure meshopt decoder
gltfLoader.setMeshoptDecoder( MeshoptDecoder );

FBX Loader

The FBXLoader handles Autodesk FBX format, supporting both ASCII (>= 7.0) and binary (>= 6400) versions. It parses the FBX tree structure and converts it to Three.js objects.

FBX Parser Pipeline

100%

The FBX format uses a connection-based system where objects reference each other by numeric IDs. The parser builds a connection map examples/jsm/loaders/FBXLoader.js209-253 and then traverses it to construct the final scene graph.

OBJ/MTL Loader

The Wavefront OBJ format is one of the oldest and simplest 3D formats. The OBJLoader parses geometry, while the MTLLoader parses companion material files.

OBJ Parsing State Machine

100%

The OBJ format uses text directives. Faces reference vertices by index using the syntax f v1/vt1/vn1 v2/vt2/vn2 .... The loader maintains a ParserState object examples/jsm/loaders/OBJLoader.js38-201 that accumulates geometry data and builds mesh objects.

MTL Material Properties:

The MTLLoader parses material properties and creates MeshPhongMaterial instances examples/jsm/loaders/MTLLoader.js1-33:

MTL Directive	Three.js Property	Description
Ka	ambient	Ambient color
Kd	color	Diffuse color
Ks	specular	Specular color
Ns	shininess	Specular exponent
d / Tr	opacity	Transparency
map_Kd	map	Diffuse texture
map_Ks	specularMap	Specular texture
map_Bump / bump	bumpMap	Bump/normal map

Texture Loading

Texture loading supports standard image formats (JPEG, PNG, etc.) and specialized formats for HDR and compressed textures.

Texture Loader Hierarchy

100%

EXR Loader Details

The EXRLoader supports OpenEXR format with multiple compression methods examples/jsm/loaders/EXRLoader.js83-96:

• Uncompressed: Raw pixel data
• RLE: Run-length encoding
• ZIP/ZIPS: Zlib compression (single/multi-scanline)
• PIZ: Wavelet compression
• DWA/DWAB: Lossy DCT-based compression

The loader uses DataTextureLoader as a base and supports output as HalfFloatType or FloatType examples/jsm/loaders/EXRLoader.js97-124:

const loader = new EXRLoader();
loader.type = THREE.HalfFloatType; // or FloatType
loader.outputFormat = THREE.RGBAFormat; // or RGFormat, RedFormat

Export System

The GLTFExporter converts Three.js scenes back to glTF format, supporting both JSON (.gltf) and binary (.glb) output.

GLTFExporter Architecture

100%

Export Options

The exporter supports various options examples/jsm/exporters/GLTFExporter.js644-661:

Option	Type	Default	Description
binary	boolean	false	Export as binary .glb format
trs	boolean	false	Export transforms as Translation/Rotation/Scale instead of matrices
onlyVisible	boolean	true	Only export visible objects
maxTextureSize	number	Infinity	Maximum texture size for downscaling
animations	Array	[]	Animation clips to export
includeCustomExtensions	boolean	false	Include custom extensions from userData.gltfExtensions

Usage Example from tests: examples/misc_exporter_gltf.html34-69

Material Property Conversion

The exporter converts Three.js materials to glTF PBR materials with extension support examples/jsm/exporters/GLTFExporter.js120-203:

• Standard Materials: Converted to glTF PBR metallic-roughness
• Physical Materials: Support extensions for clearcoat, transmission, volume, IOR, etc.
• Basic Materials: Use KHR_materials_unlit extension
• Texture Merging: Separate metalness/roughness maps are merged into a single texture

Compression Integration

Three.js integrates multiple compression technologies for reducing file sizes and GPU memory usage.

Compression Technologies Overview

100%

DRACO Mesh Compression

DRACO compresses mesh geometry using quantization and entropy coding. The GLTFDracoMeshCompressionExtension examples/jsm/loaders/GLTFLoader.js1614-1734 handles decompression:

1. Detects KHR_draco_mesh_compression extension in glTF primitives
2. Loads compressed buffer data
3. Calls DRACOLoader to decode to Three.js BufferGeometry
4. Restores attribute semantics (POSITION, NORMAL, TEXCOORD, etc.)

Meshopt Compression

Meshopt compression optimizes mesh data for GPU cache efficiency and optionally compresses it. The loader handles both KHR_meshopt_compression and EXT_meshopt_compression examples/jsm/loaders/GLTFLoader.js1890-1957

KTX2 Texture Compression

KTX2/Basis Universal provides universal texture compression that transcodes to GPU-native formats at load time. The GLTFTextureBasisUExtension examples/jsm/loaders/GLTFLoader.js1443-1500 integrates this with glTF:

• ETC1S mode: High compression ratio, lower quality
• UASTC mode: Higher quality, lower compression
• Runtime transcoding: Converts to BC1-7, ETC2, ASTC, etc. based on GPU support

fflate Archive Decompression

The fflate library handles ZIP, GZIP, and ZLIB decompression for archived formats:

• FBX: Binary FBX files may contain zlib-compressed sections examples/jsm/loaders/FBXLoader.js47
• 3MF: 3D Manufacturing Format is a ZIP archive examples/jsm/loaders/3MFLoader.js22
• EXR: OpenEXR files support ZIP compression examples/jsm/loaders/EXRLoader.js12

Loading Manager and Progress Tracking

The LoadingManager coordinates multiple file loads and tracks overall progress.

Loading Manager Flow

100%

Usage Example:

const manager = new THREE.LoadingManager();

manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
    console.log( 'Started loading: ' + url );
};

manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
    console.log( 'Loading: ' + (100 * itemsLoaded / itemsTotal) + '%' );
};

manager.onLoad = function () {
    console.log( 'Loading complete!' );
};

const loader = new GLTFLoader( manager );

Cache System

The Cache singleton src/loaders/Cache.js stores loaded resources to avoid redundant network requests:

• Enabled by default: Cache.enabled = true
• Storage: Maps URL strings to loaded data
• Shared across loaders: All FileLoader instances use the same cache
• Manual management: Cache.add(key, file), Cache.get(key), Cache.remove(key), Cache.clear()

Point Cloud and Volume Data Loaders

Specialized loaders handle point cloud and volumetric medical imaging data.

Point Cloud Formats

PCDLoader examples/jsm/loaders/PCDLoader.js13-34 supports Point Cloud Data format:

• ASCII and binary encoding (compressed and uncompressed)
• Fields: position (x, y, z), RGB color, normals, intensity, label
• Returns Points object with PointsMaterial

PLYLoader examples/jsm/loaders/PLYLoader.js12-27 supports Stanford PLY format:

• ASCII and binary encoding
• Custom property mapping via setPropertyNameMapping() and setCustomPropertyNameMapping()
• Vertex colors, normals, custom attributes
• Returns BufferGeometry

Volume Data

NRRDLoader examples/jsm/loaders/NRRDLoader.js10-19 loads medical imaging volumes:

• NRRD (Nearly Raw Raster Data) format
• Returns Volume object with 3D data arrays
• Used with VolumeSlice for visualization examples/jsm/misc/VolumeSlice.js12-16

The Volume class examples/jsm/misc/Volume.js8-13 provides:

• 3D data storage with IJK indexing
• RAS (Right-Anterior-Superior) coordinate system
• Windowing (level/width) for visualization
• Slice extraction at arbitrary orientations

CAD and 3D Printing Formats

Several loaders target CAD and 3D printing workflows.

STL Loader

STLLoader examples/jsm/loaders/STLLoader.js12-53 handles stereolithography format:

• Binary STL: May include color data (Magics format)
• ASCII STL: Supports multiple solids as geometry groups
• Returns non-indexed BufferGeometry
• Color handling: geometry.hasColors, geometry.alpha

3MF Loader

ThreeMFLoader examples/jsm/loaders/3MFLoader.js26-52 supports 3D Manufacturing Format:

• ZIP-based archive format
• Core spec: meshes, components, base materials
• Extensions: Texture 2D, color groups, metallic display (PBR)
• Returns Group with meshes

The loader parses the archive structure examples/jsm/loaders/3MFLoader.js127-267:

1. Extract ZIP contents (using fflate)
2. Parse _rels/.rels for relationships
3. Parse 3D model XML files
4. Parse texture resources
5. Build Three.js scene graph

AMF Loader

AMFLoader examples/jsm/loaders/AMFLoader.js13-28 supports Additive Manufacturing Format:

• XML-based format
• Materials, colors, ZIP compression
• Returns Group with colored meshes

VTK Scientific Visualization

VTKLoader examples/jsm/loaders/VTKLoader.js12-30 loads Visualization Toolkit format:

• POLYDATA dataset only (structured points/grids not supported)
• ASCII and binary encoding
• Polygons, triangle strips, point data, cell data
• Normals, colors, scalars
• Returns BufferGeometry