A texture with the wrong colour space
Left plane: correct. Right plane: the colour label left at the default, so the image is read as linear and looks washed out.
Screens do not store brightness evenly (sRGB), but light maths needs evenly spaced numbers (linear). three.js converts between them for you, and breaks the picture if you tell it the wrong thing. Tone mapping then squeezes very bright light into what a screen can show.
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 the showroom's renderer keep colours close to true under a bright key light. Write the two lines.
A roughness map is loaded with TextureLoader. What colour space does it get?
Explain it without notes
A photo texture looks pale on a plane. What is the likely cause and the one-line fix?
Why does None tone mapping turn bright orange yellowish, and what does a tone-mapping curve do instead?
Console
Nothing logged yet.Expected console output
the file holds: grey 128,128,128 and blue 42,157,244
colorSpace = SRGBColorSpace (right) grey 128,128,128 blue 42,157,244
colorSpace left at the default (wrong) grey 188,188,188 blue 113,206,250