Skip to content

Environment

Import

import { Environment } from '@react-three/drei'

Video Lecture

Section Video Links
Environment Environment Environment

Description

We can make 3D models look much better if we set an environment map that it will use for any reflection calculations.

We can set the scene.environment property to a texture.

But since we are using React Three Fiber and Drei, we will use the Environment helper which produces a great effect and is much easier to use.

Import Environment from Drei.

import { Environment } from '@react-three/drei'

And use it in your JSX. E.g.,

<Environment preset="forest" />

You can also set the environment map as the scene background.

<Environment preset="forest" background />

Note that presets use lower quality images, which may be fine for reflections, but as a background image, you may decide it is a bit too pixelated. Also, the HDR image used in the preset is downloaded from a CDN rather than locally.

Since Three r146, we can now also blur the background using backgroundBlurriness.

<Environment preset="forest" background backgroundBlurriness={0.5} />

A list of presets can be found at https://github.com/pmndrs/drei/blob/master/src/helpers/environment-assets.ts

Instead of using the presets, you can source your own environment maps instead. There are high quality HDR images for download from Poly Haven. They are licensed CC0 which allows you to use them any way you wish, even commercially.

Download a HDR image of any quality you prefer, and save it into the ./public/img/ folder. Be sure to download HDR and not EXR since you may get an error when tying to use it.

I downloaded a file named venice_sunset_1k.hdr

<Environment files="./img/venice_sunset_1k.hdr" background />

When you use the Environment module, you no longer need to include a light in your scene if you are using PBR materials. PBR materials, such as the MeshStandardMaterial and MeshPhysicalMaterial won't need at least one enabled light in the scene if their envMapIntensity property is greater than 0. By default, it is set to 1.0.

./src/App.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Stats, OrbitControls, Environment } from '@react-three/drei'
import { Canvas, useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'

export default function App() {
  const gltf = useLoader(GLTFLoader, '/models/monkey.glb')

  return (
    <Canvas camera={{ position: [-0.5, 1, 2] }}>
      <Environment
        files="/img/venice_sunset_1k.hdr"
        background
        backgroundBlurriness={0.5}
      />
      <directionalLight position={[3.3, 1.0, 4.4]} intensity={4} />
      <primitive object={gltf.scene} position={[0, 1, 0]} />
      <OrbitControls target={[0, 1, 0]} autoRotate />
      <axesHelper args={[5]} />
      <Stats />
    </Canvas>
  )
}

Working Example

<>
Environment drei sbedit.net
Scene.environment threejs.org
R3F Primitive docs.pmnd.rs
Advanced Example codesandbox.io
HDRIs Poly Haven skybox.blockadelabs.com

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout environment
npm install
npm start

Comments