Search⌘ K
Home/
Courses/
Learn Three.js for 3D Computer Graphics

Importing from 3D File Formats

Learn to import and use OBJ and MTL format files to create objects in Three.js.

We'll cover the following...

We listed a number of formats that are supported by Three.js. We’ll quickly walk through a few examples of those formats.

The OBJ and MTL formats

OBJ and MTL are companion formats often used together. An OBJ file defines the geometry, and an MTL file defines the materials that are used. Both OBJ and MTL are text-based formats. A part of an OBJ file looks like this:

C++
v -0.032442 0.010796 0.025935
v -0.028519 0.013697 0.026201
v -0.029086 0.014533 0.021409
usemtl Material
s 1
f 2731 2735 2736 2732
f 2732 2736 3043 3044

An MTL file defines materials, as follows:

C++
newmtl Material
Ns 56.862745
Ka 0.000000 0.000000 0.000000
Kd 0.360725 0.227524 0.127497
Ks 0.010000 0.010000 0.010000
Ni 1.000000
d 1.000000
illum 2

The OBJ and MTL formats are well supported by Three.js, so this is a good format to choose if we want to exchange 3D models. Three.js has two different loaders we can use. If we only want to load the geometry, we use OBJLoader. The following screenshot shows this example:

OBJ model that just defines the geometry
OBJ model that just defines the geometry

Example: Load OBJ

Let’s execute the load-obj.js example in the below playground by clicking the “Run” ...