How to use equirectangular hdr image for envMap?

[zhutq]

Hi,
I have an equirectangular .hdr image from HDRIHaven.
I want to use it as standard mesh material’s envMap.

let textureEquirec = new THREE.RGBELoader().load( 'textures/paul_lobe_haus_1k.hdr');
textureEquirec.encoding = THREE.RGBEEncoding;
textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
material.envMap = textureEquirec;

The loader does not report error but it’s pure black.

How can I fix this? Thank you very much!

[Mugen87]

Um, I’m not sure if this workflow is supported right now. AFAIK, the three.js examples use HDR images in cube map format. In this example, an equirectangular HDR image is converted to cube map via EquirectangularToCubeGenerator. If the code in the example does not work for your use case, I suggest you create an issue at github.

[OliverXH]

How to apply HDRI(env)?

Use RGBEloader to load the .hdr file, and in callback function use PMREMGenerator to generate the map from this HDR file. Then set the envMap parameter for your physical material: let generator = new THREE.PMREMGenerator(renderer); new RGBELoader().load('textures/gothic_manor_02_2k.hdr', (hdrmap) => { // ... let envmap = generator.fromEquirectangular(hdrmap); const ballMaterial = { // ... envMap: envmap.texture }; });