FDNavigate back to the homepage

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

May 21st, 2023 · 1 min read

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:

1const { gl } = useThree();
3const texture = useLoader(RGBELoader, "/water-ripples-1.3.hdr");
4const pmremGenerator = new THREE.PMREMGenerator(gl);
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.

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 );

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!

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

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.

More articles from theFrontDev

Sublime Soft Particle Fog Effect

Enhance your visual compositions with the Sublime Soft Particle Fog Effect. This powerful and versatile rendering technique adds an exquisite touch of realism and depth to your scenes. Immerse your viewers in a world where atmospheric conditions are brought to life with a gentle and realistic fog that gracefully envelops the environment. The Sublime Soft Particle Fog Effect creates a sense of scale, depth, and ambiance, making every detail feel tangible and captivating. With its smooth transitions, dynamic lighting interaction, and subtle movements, this effect elevates your visuals to a new level of sophistication. Whether you're creating architectural visualizations, cinematic masterpieces, or immersive gaming environments, the Sublime Soft Particle Fog Effect is an essential tool for crafting visually stunning and emotionally impactful experiences.

May 21st, 2023 · 1 min read

Floodfill Growth Patterns with Decals and Dynamic Shaders

Immerse yourself in a world of captivating growth patterns through a shadertoy ported floodfill-powered solution. Seamlessly blending custom meshes, intricate decals, offscreen rendering and dynamic rendering techniques, the innovative approach unlocks a new level of visual artistry. Unleash your creativity as you harness the power of custom meshes and decals to shape and influence the growth, creating unique visuals. Discover the potential of floodfill-driven shaders and elevate your projects with this dynamic and immersive experience.

May 20th, 2023 · 2 min read
© 2021–2023 theFrontDev
Link to $https://twitter.com/TheFrontDevLink to $https://github.com/Richard-ThompsonLink to $https://www.linkedin.com/in/richard-thompson-248ba3111/