Scene-wide envmap for HDR lighting in three.js

Question

I want to try and use an HDR image for my lighting. I have tried doing

var envmap = new THREE.TextureLoader().load( "./assets/wooden_lounge_1k.hdr" );
scene.environment = envmap;

but all the objects in my scene are black in color. I have seen some demos but they usually set the envmap property in the material for a single object, but I want to have the HDR lighting to be applied on all objects in the scene.

How would I do this?

thanks!

Answer 1

I found a JSFIDDLE website that had some code that would help me. It used the RGBELoader, but it had some extra stuff.

What I did:

function setLighting(){

    new RGBELoader()
        .setDataType( THREE.UnsignedByteType )
        .setPath( 'https://threejs.org/examples/textures/equirectangular/' )
        .load( 'royal_esplanade_1k.hdr', function ( texture ) {

        var envMap = pmremGenerator.fromEquirectangular( texture ).texture;

        scene.background = envMap;
        scene.environment = envMap;

        texture.dispose();
        pmremGenerator.dispose();
    })
    var pmremGenerator = new THREE.PMREMGenerator( renderer );
    pmremGenerator.compileEquirectangularShader();

}

Answer 2

var envmap = new THREE.TextureLoader().load( "./assets/wooden_lounge_1k.hdr" );

You have to load HDR textures with THREE.RGBELoader (and not with THREE.TextureLoader). I suggest you study the following official example for more information:

https://threejs.org/examples/webgl_loader_texture_hdr