Seven materials, one sphere shape
Open the scene tree and the status bar: 7 meshes, 7 draw calls. Depth is nearly black on purpose (see the walkthrough).
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
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.
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?
Console
Nothing logged yet.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