Procedural Environment
Light & surfaces
Lesson 8 of 15
Light a reflective object with six generated cube-map faces instead of an external HDR image.
Create a self-contained studio-like reflection map and distinguish scene.environment from scene.background.
How this scene works
A CubeTexture contains faces in +X, −X, +Y, −Y, +Z, −Z order. These canvas faces use display colors and are marked sRGB. scene.environment supplies image-based lighting to standard materials, while scene.background only controls what appears behind the objects. Three.js prepares the environment for roughness-dependent reflections. This small LDR map is a teaching fixture, not a physically calibrated HDR studio. Cleanup releases the texture when the project reruns.
Procedural Environment
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Assign the cube texture to scene.background too. Then change the +Y face to orange and increase roughness from 0.12 to 0.8 to observe how the reflection spreads.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
