Loading 3D models
3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on. Some formats are difficult to work with, inefficient for realtime experiences, or simply not fully supported at this time.
This guide provides a workflow recommended for most users, and suggestions for what to try if things don’t go as expected.
Recommended workflow
Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.
Public-domain glTF files are available on sites like Sketchfab, or various tools include glTF export:
- Blender by the Blender Foundation
- Substance Painter by Allegorithmic
- Modo by Foundry
- Toolbag by Marmoset
- Houdini by SideFX
- Cinema 4D by MAXON
- COLLADA2GLTF by the Khronos Group
- FBX2GLTF by Facebook
- OBJ2GLTF by Analytical Graphics Inc
If your preferred tools do not support glTF, consider requesting glTF export from the authors, or posting on the glTF roadmap thread.
When glTF is not an option, popular formats such as FBX, OBJ, or COLLADA are also available and regularly maintained.
Loading
Only a few loaders (e.g. ObjectLoader) are included by default with three.js — others should be added to your app individually.
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
Once you’ve imported a loader, you’re ready to add a model to your scene. Syntax varies among different loaders — when using another format, check the examples and documentation for that loader. For glTF, usage with global scripts would be:
const loader = new GLTFLoader();
loader.load( 'path/to/model.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );