Workbook 6, Page 6: Materials

Workbook 6, Page 6: Materials

Box 1: Materials

Materials are the abstraction in THREE that controls how the shapes look - what colors the pixels of the triangles ultimately are shown in the resulting image.

In the future, we'll learn about how Materials contains programs that tell the graphics hardware how to color each pixel. And we'll see how we can make new materials by writing programs for the hardware.

For now, we should notice a few parts of what materials can do:

  1. Materials can have a color. In the future, we'll see how we can use materials to give objects multiple colors.
  2. Materials can react with lights. The color that we see in the image is the interaction of the lights and the material (and is affected by the object shape).
  3. Materials can provide advanced effects that consider other objects - such as shadows and reflections. But we aren't doing to do that now. Materials provide local effects - the color of the point depends only on that point (and the lights), not what happens at other points. And they sometime provide global effects (light shadows and reflections) that depend on other objects.

So, for now, think about materials as things like "shiny red plastic" or "wood with blue (matte or not-shiny) paint". In the future, we can add other things like woodgrain patterns and mirror reflections.

One thing to notice: because Materials have the programs the hardware uses for coloring pixels, they are specialized to the kind of objects being drawn. Since we will always be drawing meshes, we'll use the Mesh materials.

THREE's built in Materials

THREE provides a bunch of built in materials. Again, notice these all are for use with Mesh objects. Here are the ones we'll focus on for now:

There are two special materials (MeshDepthMaterial and MeshNormalMaterial) that are useful for debugging. They show object properties in the colors.

Materials have different properties (like color or shininess). Those properties can be set either for the whole object, or can be provided as a "map" that allows us to control how different parts of the object look. For now, we won't consider maps - we'll learn about them later in the class.

Here are the main properties of MeshStandardMaterial that we will use to get different appearances (see the documentation for a full list):

In the exercise, you can try these out.

Exercise: Materials

Make each sphere have a different, non-white, material. Use different settings of MeshStandardMaterial. Experiment with different values to get different appearances. To get the points for this exercise, the materials should be non-white, and should appear different. Note: there is a point light source near (but to the right of) the camera and a directional light source shining down (both lights are white).

All you need to change are the 9 materials. The program is in 6-materials.js.

We'll discuss animation on the next page a little before moving on to the programming parts.