Graphics Reference
In-Depth Information
Using
OBJMTLLoader
with
multiple
materials
Three.js provides a number of standard geometries that you can use to create your
3D scenes. Complex models, however, are more easily created in dedicated 3D mod-
eling applications such as Blender or 3ds Max. Luckily, though, Three.js has great
support for a large number of export formats, so you can easily load models created in
these kinds of packages. A standard that is widely supported is the
OBJ
format. With
this format, the model is described with two different files: an
.obj
file that defines
the geometries and an
.mtl
file that defines the material. In this recipe, we'll show
you the steps you need to take to successfully load a model using
OBJMTLLoader
,
which is provided by Three.js.
Getting ready
To load models described in the
.obj
and
.mtl
format, we need to first include the
correct JavaScript file, as these JavaScript objects aren't included in the standard
Three.js JavaScript file. So, within the head section, you need to add the following
script tags:
<script src="../libs/MTLLoader.js"></script>
<script src="../libs/OBJMTLLoader.js"></script>
The model we use in this example is a Lego mini figure. In Blender, the original model
looks like this:
