Course outline

Topic 5.1Intermediate ~19 min · step 1 of 7

A Tour of Materials

In one line

A material decides how a surface answers light. three.js has a ladder of them, from Basic (ignores light) to Physical (the most realistic and the most costly). You see all seven side by side and meet the settings that cause most surprises: side, transparent, opacity and wireframe.

0/7 · 0%

Think of it like this

A painter has the same wall to paint but can choose chalk, matt paint, gloss paint or mirror foil. The wall (the geometry) does not change; what you see does. A material is the choice of paint: it tells the GPU how to turn light into the colour of each pixel.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

material: The object that says how a surface answers light: colour, shininess, transparency. A mesh is a geometry plus a material.
lit material: A material that computes light (Lambert, Phong, Standard, Physical). It needs a light or an environment to show anything.
side: Which faces of a triangle are drawn. A triangle has a front (the side its corners wind counter-clockwise towards you) and a back.
transparent: A material flag that turns on blending, so opacity below 1 lets the picture behind show through.

Step by step

01One geometry, seven materials

The example makes one SphereGeometry and shares it between seven meshes. Only the material changes, so every difference you see comes from the material.

02Read the row from left to right

Basic is a flat orange disc: no shading at all. Lambert and Phong show a lit side and a shadow side; Phong adds a small bright spot. Standard and Physical look like paint. Normal paints each pixel by its surface direction. Depth is almost black: depth is stored non-linearly, so a sphere 7.5 m away with far = 100 is nearly black.

03Read the numbers

Each line is the pixel at the middle of a sphere. Basic prints the pure colour 255,107,44; the lit ones change with light. The last line shows 7 draw calls (one per mesh) and 7 shader programs.

04The settings table

The second example has no light at all, on purpose. It shows that Standard is black, that a back face is invisible unless side: DoubleSide, that opacity needs transparent, and that wireframe counts lines, not triangles.

Try it yourself

1
Switch on a light for the Standard plate
In the second example add scene.add(new THREE.AmbientLight("#ffffff", 1)); before renderer.render. The Standard plate changes from 0,0,0 to a dark orange. An AmbientLight of intensity 1 on this orange gives about 152,61,22 (measured on a plain Standard plane). Intensity units are explained in Topic 5.4.
2
Make the back side visible
Change the third case to side: THREE.DoubleSide (the fourth case already has it). The plate seen from behind turns from the background colour 11,17,24 to orange 255,107,44.

Code & diagrams

Seven materials, one sphere shape New tab

Open the scene tree and the status bar: 7 meshes, 7 draw calls. Depth is nearly black on purpose (see the walkthrough).

idle

Console

Run the scene to see its console.

Expected console output

Basic     centre pixel 255,107,44
Lambert   centre pixel 248,104,43
Phong     centre pixel 246,105,47
Standard  centre pixel 240,108,62
Physical  centre pixel 228,101,54
Normal    centre pixel 96,131,251
Depth     centre pixel 3,3,3
draw calls: 7  shader programs: 7

The settings that surprise: no light, side, opacity, wireframe New tab

There is no light in this scene. Basic plates need none; the Standard plate is black. The wireframe plate's middle point lies on a line, so its pixel is orange; triangles 48 and lines 24 are three.js's counts.

idle

Console

Run the scene to see its console.

Expected console output

Standard, no light                     0,0,0
Basic, seen from the front             255,107,44
Basic, front side, seen from behind    11,17,24
Basic, DoubleSide, seen from behind    255,107,44
Basic, opacity 0.5, transparent        133,62,34
Basic, opacity 0.5, NOT transparent    255,107,44
Basic, wireframe                       255,107,44
background                             11,17,24
triangles: 48 lines: 24

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

A typo in a material option

Write new THREE.MeshStandardMaterial({ colour: "red" }).

terminal

$ Run

── what you'll see ──

[warn] THREE.Material: 'colour' is not a property of THREE.MeshStandardMaterial.

The material still works, and its colour stays white (ffffff).

Break #2

A colour name three.js does not know

Write new THREE.MeshBasicMaterial({ color: "ornge" }).

terminal

$ Run

── what you'll see ──

[warn] THREE.Color: Unknown color ornge

The colour falls back to white.

Myth vs fact

Myth

Physical is just a better Standard, so use it everywhere.

Fact

Physical runs more maths per pixel, and a bigger shader, even if you never use its extra features. Use it only where clearcoat, sheen or transmission pays for itself.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Materials share one compiled program when their cache key matches: the material type plus the scene's lights, fog, shadows and tone mapping. Changing any of them later can compile a new program (a visible hitch); Topic 5.4 shows it.
▸
wireframe: true draws every triangle's three edges, so the plate's 8 triangles become 24 lines.

Remember this

1
The problem this solves: beginners pick a material at random and then meet a black object, a face that vanishes, or a slow phone. Knowing the ladder and its costs, you choose on purpose.
2
The ladder. MeshBasicMaterial ignores light: the colour is the colour. MeshLambertMaterial gives matt shading with no shiny spot and is cheap. MeshPhongMaterial adds a shiny spot. MeshStandardMaterial is physically based: roughness and metalness. MeshPhysicalMaterial adds clearcoat, sheen and transmission on top. MeshNormalMaterial and MeshDepthMaterial are debug tools: they show surface direction and distance, and need no light.
3
Each kind of material is its own shader. The example prints shader programs: 7: three.js compiles one GPU program for each of the seven.
4
The cost goes up the ladder. Basic does almost no maths per pixel. Standard and Physical run a long lighting calculation for every pixel and every light. On a phone the difference is real, so use the simplest material that gives the look you need. Lumen's bike uses Standard.
5
Four settings that surprise people. side says which faces are drawn: FrontSide (default), BackSide, DoubleSide. transparent: true makes opacity work and sorts the object with other see-through things (see the explain question below). opacity alone, without transparent, does nothing. wireframe: true draws the triangle edges as lines instead of filled triangles.
6
A Standard material with no light is black. Lit materials compute light. If the scene has no lights, and no environment, there is nothing to compute from, and the result is black. This is one of the most common "my model is black" causes (the black-screen checklist is in Topic 0.3).

Explain it without notes

A model appears black. List the material-related causes in order.

Why does opacity: 0.5 do nothing on its own, and what else changes when you set transparent: true?

Practice

Make a sphere of MeshStandardMaterial visible in a scene that has no lights, without adding a light object. Write the one line.

Draw the sphere as a net of lines, on top of a solid sphere of the same size, without z-fighting on the surface. Say what you set.

Done when you can

Name the seven materials and say which need light
Say why a Standard material in an empty scene is black
Explain what side, transparent, opacity and wireframe do
Say what a shader program is and why different materials add to compile time

Command Palette