The settings that surprise: no light, side, opacity, wireframe
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.
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
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