Graphics Reference
In-Depth Information
THREE.MeshFaceMaterial(materials));
scene.add(sphere);
That's it. Each face of the geometry will use the material it points to.
How it works...
Because we specify
materialIndex
on each
THREE.Face
object, Three.js knows
which material from the provided array it should use when it wants to render a spe-
cific face. One thing you need to take into account is that this can affect the per-
formance of your scene, as each of the materials needs to be managed by Three.js;
however, the performance is better than using separate meshes but worse than com-
bining the textures into one.
There's more…
Some of the geometries Three.js provides already set a
materialIndex
property
when you instantiate them. For instance, when you create
THREE.BoxGeometry
,
the first two faces are mapped to
materialIndex 1
, the next two are mapped to
materialIndex 2
, and so on. So, if you want to style the sides of a box, you just
have to provide an array with six materials.
Another interesting use of using materials for specific faces is that you can easily
create interesting patterns, for instance, when you can very easily create a checked
layout like this:
