Each geometry in Three.js consists of a number of vertices and faces. In most cases, when you define a material that can be used together with a geometry, you use a single material. With Three.js, however, it is also possible to define a unique material for each of the faces of your geometry. You could, for instance, use this to apply different textures to each side of a model of a house. In this recipe, we will explain how to set up the materials so that you can use different textures for individual faces.

Getting ready

In this recipe, we won't use any external textures or libraries. It is good, however, to look at the final result that we'll be creating in this recipe. For this, open the 04.06-use-separate-materials-for-faces.html example in your browser.

In the preceeding screenshot, you can see a rotating sphere, where each face is rendered with a different color and half of the faces have been made transparent. In the following section, we'll show you...