Navigate
Search topics across all sections
Environment
The Environment component wraps a panoramic image around your scene to create realistic lighting and reflections. Without it, metallic surfaces look flat and lifeless. With it, every shiny object reflects the world around it, and the whole scene feels grounded in a real place.
You model a beautiful chrome car, export it, and load it into R3F. But the chrome looks dull grey, almost matte. You add more lights, crank up metalness — still flat. The problem? Chrome needs something to reflect. Without an Environment providing a 360-degree image, there is nothing for the metal to mirror.
Metallic materials appear flat grey. Reflections show nothing because scene.environment is null.
Real-world
Photographers who shoot product photos use a technique called HDRI lighting. They go to a real location — a sunset beach, a city street, a warehouse — and take a full 360-degree photo using a special camera.
Back in the studio, they wrap that photo around the scene like a giant dome. Now when they photograph a shiny watch, it reflects the sunset. A chrome vase mirrors the warehouse walls. The product looks like it is actually there.
The Environment component does exactly this. It takes an HDRI photo and wraps it around your 3D scene. Every reflective surface picks up the colors, light, and shapes from that photo.
What Environment Does
It serves two purposes, and you can use one or both.
HDRI Image
A 360-degree photo of a real place
IBL Lighting
Light comes from all directions naturally
Reflections
Shiny objects mirror the environment
Background
Optional: show the HDRI as a skybox
Guided Walkthrough
Let us go from a dull scene to a photorealistic one in three steps.
Step 1 — Add a preset for instant IBL
import { Environment } from '@react-three/drei'
{/* Presets: sunset, dawn, night, warehouse,
forest, apartment, studio, city, park, lobby */}
<Environment preset="sunset" />
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial metalness={0.9} roughness={0.1} />
</mesh>One line gives you physically accurate lighting from all directions. The metallic sphere now reflects warm sunset colors instead of looking flat grey. Presets are small and cached.
Step 2 — Show the environment as a background
{/* Lighting only — black background */}
<Environment preset="city" />
{/* Now the HDRI is visible behind everything */}
<Environment preset="city" background />
{/* Blurred for a product-shot look */}
<Environment
preset="warehouse"
background
blur={0.6}
backgroundIntensity={0.5}
/>The background prop renders the HDRI as a visible skybox behind your objects. Add blur to soften it for a product photography feel. Dim it with backgroundIntensity to keep the focus on your model.
Step 3 — Build a custom environment with Lightformers
import { Environment, Lightformer } from '@react-three/drei'
<Environment background>
<Lightformer
form="ring" intensity={2}
position={[0, 5, -5]}
scale={[10, 10, 1]}
color="cyan"
/>
<Lightformer
form="rect" intensity={1}
position={[5, 0, 0]}
scale={[20, 2, 1]}
color="white"
/>
</Environment>Instead of loading an HDRI, you can build a procedural environment from scratch using Lightformer shapes. You get pixel-perfect control over every reflection — great for car configurators and branded product shots.
What you just learned
Environment provides image-based lighting (IBL) from a 360-degree photo
Without it, metallic and reflective materials look flat and lifeless
Built-in presets cover common scenarios and are small and cached
The background prop renders the HDRI as a visible skybox
Lightformers let you build custom environments with precise control over reflections
Question
If Environment provides beautiful lighting from all directions, do you still need to add directional lights and ambient lights to your scene? Think about what IBL gives you versus what a directional light gives you (like cast shadows).
Think about it...
You have a scene with <Environment preset='sunset' /> (no background prop). What does the user see behind the 3D objects?
Try These Challenges
Put what you learned into practice. Try each challenge in the demo above using the Leva controls, then check the solution.
Try This!
Beginner
Switch preset to 'night' — dark reflections!
Try This!
Beginner
Set backgroundBlur to 0 — sharp background
Try This!
Beginner
Set envIntensity to 0 — no reflections at all
These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.
<>
{/* Both try to set scene.background! */}
<Environment preset="sunset" background />
<Sky sunPosition={[1, 0.5, 0]} />
</><Environment
preset="warehouse"
background // Sharp warehouse walls everywhere
/>// 20MB 4K HDRI from a CDN
<Environment
files="countryside_4k.hdr"
path="https://cdn.example.com/hdri/"
background
/>Best Practices
Start with presets
Built-in presets are optimized and small. Only switch to custom HDRIs when you need a specific look that no preset matches.
Blur product backgrounds
Use blur={0.4-0.7} with a dimmed backgroundIntensity for professional product shots that keep focus on the model.
Use Sky for sky backgrounds
If you just need a sky background, the Sky component is cheaper and more configurable. Use Environment for IBL and Sky for the visible backdrop.
Lightformers for branding
Procedural environments with Lightformers give you pixel-perfect control over reflections. Essential for car configurators and branded product pages.