ThreeJS Loading 3D Models

There are hundreds of file formats for 3D models, each with its own purpose, set of features, and level of complexity. Although three.js has a lot of loaders, choosing the ideal one for your needs and workflow will save you time and stress in the long run. Some formats are difficult to work with, inefficient for real-time experiences, or just unsupported at the moment.

This guide includes a recommended procedure for most users as well as advice for what to attempt if things don't go as planned.

Before We Begin

Start by learning how to run things locally if you're new to running a local server. By hosting files effectively, many frequent issues when viewing 3D models can be avoided.

Recommended Workflow

We advocate utilizing glTF whenever possible (GL Transmission Format). The format's.GLB and.GLTF versions are both fully supported. glTF is small to transmit and fast to load because it is focused on runtime asset delivery. Meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras are among the features.

GlTF files in the public domain are available on sites like Sketchfab, and a number of 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 chosen tools don't support glTF, you can ask the authors for a glTF export or post on the glTF roadmap thread.

Popular formats such as FBX, OBJ, and COLLADA are also available and routinely updated when glTF is not an option.

Loading

Only a few loaders (such as ObjectLoader) are supplied by default with three.js; the rest must be added manually to your project.

GlTF files in the public domain are available on sites like Sketchfab, and a number of tools include glTF export:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

You can now add a model to your scene after you've imported a loader. Different loaders have different syntax; if you're using a different format, see the examples and documentation for that loader. The following is an example of how to use glTF with global scripts:

const loader = new GLTFLoader();


loader.load( 'path/to/model.glb', function ( gltf ) {


	scene.add( gltf.scene );


}, undefined, function ( error ) {


	console.error( error );


} );