How to Add hdri Background

Discussion
1

Hi, experts. I just want to ask if How to Add hdri Background in three.js?

2

Hi, if you’re using pure js have a look at the code in the official hdr example, this uses an instance of RGBMLoader to load the hdri and then sets the scene.environment to the resulting ibl source.

If you’re using a framework such as r3f you’d use the environment abstraction

1 Like
3

Oh, sorry sir, it seems like the examples you showed uses react and i don’t use it, is there any other examples sir? sorry for disturbing… i’m just new in three.js so i’m not familiar where to find it in documentation because there is no hdri when i search for it on the site

4

this example is plain three, not react…

this example also uses an RGBELoader to load a hdri…

the code would look something like this in a general use case…

import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
const pmremGenerator = new THREE.PMREMGenerator( renderer );

const hdriLoader = new RGBELoader()
hdriLoader.load( 'path/to/your/texture.hdr', function ( texture ) {
  const envMap = pmremGenerator.fromEquirectangular( texture ).texture;
  texture.dispose(); 
  scene.environment = envMap
} );
2 Likes