Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 6.5 — Environment Maps and HDR
3D Web · Example 1 of 3

Chrome with and without an environment

The left ball has no environment and only the light's dot. The right ball reflects RoomEnvironment. The count of 3 includes the lighting lookup table; the rest belongs to preparing the environment. The map's size depends on the room, not on your screen.

Shiny metal shows its surroundings, not the light. An environment map is a picture of the surroundings, turned by PMREMGenerator into light and reflections. Without one, chrome is black.

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 4 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Write the lines that load /data/3d/hdr/studio_small_08_1k.hdr and make it the scene's environment, falling back to RoomEnvironment if it fails.

02

How do you make the sky behind the bike blurred but keep the reflections sharp?

Explain it without notes

01

Why is a chrome ball black in a scene that has several lights?

02

What does PMREMGenerator do, and what happens if you skip it?

Chrome with and without an environment
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

the room map is a texture: true | size: 768 x 1024
textures in GPU memory: 3