Materials and Textures - Three.js - page 177

Creating a mesh with multiple materials
When you create THREE.Mesh , you can only specify a single material that can be
used for that mesh. In most scenarios, this will be sufficient. However, there are also
cases where you want to combine multiple materials. For instance, you might want to
combine THREE.MeshLambertMaterial with a material that shows you the wire-
frame of the geometry. In this recipe, we'll show you the required steps to create a
mesh that uses multiple materials.
Getting ready
For this recipe, we don't require additional resources or libraries. If you want to look
at the result of this recipe, open up the 04.05-create-a-mesh-with-multiple-
materials.html example in your browser.
In the preceding screenshot, you can see a cylinder. This cylinder is rendered with
two materials. In the next section, we'll show you the steps you need to take to create
this.
How to do it...
To create a multimaterial mesh, Three.js provides a helper function. You can use
THREE.SceneUtils for this, as is shown in the next couple of steps:
1. The first thing you need to do is create the geometry you want to use. For this
recipe, we use a simple THREE.CylinderGeometry object: