Graphics Reference
In-Depth Information
Using separate materials for faces
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 dif-
ferent 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 the steps you need to take to recreate this.
How to do it...
To define specific materials for each face, we need to perform the following steps:
1. The first thing we need to do is create the geometry. For this recipe, we use
THREE.SphereGeometry
, but these steps can also be applied to other geo-
metries:
