Mastering Skybox Realism - Loading and Applying HDRI with Three and R3F

This will be a really quick demo of how to apply a HDRI to a sky box or dome and how to have the hdri effect objects within the dome.

Its super simple once you have an example of how to do it.

One way to load a env map is like so:

Copy 
1const { gl } = useThree();
2
3const texture = useLoader(RGBELoader, "/water-ripples-1.3.hdr");
4const pmremGenerator = new THREE.PMREMGenerator(gl);
5pmremGenerator.compileEquirectangularShader();
6
7const envMap = pmremGenerator.fromEquirectangular(texture).texture;
8envMap.encoding = THREE.LinearEncoding;
9envMap.mapping = THREE.EquirectangularReflectionMapping;

This allows us to load an envMap which we can then use as a map or apply it to objects which gives it the appearance it interacts with the light. ie shadows and brighter areas.

After loading we need to apply the texture and envmap to the sphere which is acting as sky dome this provides it with the initial color and light.

Copy 
1{
2  envMap && (
3    <mesh>
4      <sphereGeometry args={[20, 20, 20, 20]} />
5      <meshStandardMaterial
6        attach="material"
7        side={THREE.BackSide}
8        envMap={envMap}
9        map={texture}
10        needsUpdate={true}
11      />
12    </mesh>
13  );
14}

Dont forget to only apply it to the backside as we want it inside the sky dome, this means the sides of the dome become see through when looking out to in. You would need a secondary dome if you were wanting the outside of the dome not to be see through! One of the limitations to this technique.

I then just created a cube, to apply the light emitting envMap you simply just set the envMap property on the material of the cube, that simple!

Copy 
1<mesh>
2  <boxBufferGeometry attach="geometry" args={[10, 10, 10]} />
3  <meshStandardMaterial attach="material" envMap={envMap} />
4</mesh>

Although this probably isn’t perfect it gives you a good understanding of how to make a skybox with a hdri image!

Really short and to the point! Until next time.