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:
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 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:
MeshBasicMaterial) colors the pixels with the object's color, ignores lighting.
MeshLambertMaterial- computes a simple dull appearance. We'll learn the math in class. Note: this material only computes the lighting at the vertices, so it may not give expected results on large polygons.
MeshPhongMaterial- this uses the classic lighting model that we have taught in graphics classes historically. We'll learn the math for this one. It lets us control various aspects of the appearance.
MeshStandardMaterial- a fancier material that is easier to control than the Phong model (determine the parameters to get specific appearances). Since we don't have to implement it ourselves, we might as well use the fancier thing since it looks better. It has lots of parameters to control advanced effects.
MeshPhysicalMaterial- an even fancier material.
There are two special materials (
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):
emissive- this is basically the "ambient lighting"
metalness- is the material metallic or not
roughness- how shiny is the object
In the exercise, you can try these out.
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
We'll discuss animation on the next page a little before moving on to the programming parts.