HDRI environment lighting for Three.js & React Three Fiber

An HDR environment surrounds the scene with a real photographed panorama and lights the scene with it. Every reflective, glossy or metallic surface picks up the room, the city or the sky in the image, and light falls on your objects from the directions it came from in the photograph. That is why HDR lighting makes products look photographed rather than rendered.

Built-in environments

Ten ready environments cover the common looks: Apartment, City, Forest, Dawn, Lobby, Night, Park, Studio, Sunset and Warehouse. Studio gives clean, even light for products; Sunset and Dawn give warm, low light; City and Warehouse give strong, structured reflections for metal and glass; Night gives a dark, moody scene.

Your own HDR images

Upload your own HDR or EXR files, or ordinary images, with Add HDR. Add one and it becomes the environment. Add several and they become a playlist that moves from one to the next on its own, a simple way to show one product in several settings. The change between them can be a Crossfade, a Wipe, an Iris, a Dissolve, or a Vertical or Horizontal Divider, played in Sequential, Yoyo or Random order, with a Duration for each change and a Hold time between them.

Settings

• Background Intensity and Environment Intensity: the brightness of the visible backdrop and of the light it casts, set separately, so you can dim the background and keep the lighting.
• Background Blurriness: soften the backdrop into a blurred, studio-like feel while the reflections stay sharp.
• Background Rotation and Environment Rotation: turn the image to put the brightest light where you want it.
• Ground Radius, Ground Height and Ground Scale: project the bottom of the panorama onto a ground, so objects appear to stand in the place rather than float inside a sphere.

Tips

• Turn the environment until the main light source in the image sits behind and to the side of your product; reflections and highlights then frame its shape.
• Blur the background and keep the lighting at full strength when the backdrop competes with the object.
• Lower Background Intensity and pair it with fog or a dark page for a moody product shot.

HDR or sky?

Use an HDR environment for products, interiors, jewellery, cars and anything shiny, where reflections sell the material. Use the calculated sky with the sun and moon when the scene is outdoors and the light should change with the time of day, together with volumetric clouds, ocean or terrain.