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 modeling 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...