0

I want to use sibl.

const loadHDR = () => {
    new THREE.RGBELoader().load('./resource/textures/HDR/Etnies_Park_Center_3k.hdr', (texture, textureData)=> {
    texture.encoding = THREE.RGBEEncoding;
    texture.minFilter = THREE.NearestFilter;
    texture.magFilter = THREE.NearestFilter;
    texture.flipY = true;

    console.log(texture)

    textureData.height = 1200
    textureData.width = 1200
    textureData.exposure = 10
    console.log(textureData)


    const cubemap = new THREE.EquirectangularToCubeGenerator(texture, { resolution: 3200, type: THREE.UnsignedByteType });
    exrBackground = cubemap.renderTarget;
    cubeMapTexture = cubemap.update(renderer);
    texture.dispose();
})
}

This is my code. and

console.log(textureData)

The above code results show the revised values well. But cubemap's exposure does not change.

Another problem is reading .ibl file I have to read the position of the sun in webgl, but I can't read the file. I am using webpack. fs library no exist.

gman
  • 100,619
  • 31
  • 269
  • 393
엄승탁
  • 15
  • 1
  • 4

1 Answers1

1

I've been trying to adjust exposure with RGBELoader as well. It looks like you have to set it as a property to the renderer, since the properties that you list are only returned by the module in the callback function. They don't "set" anything.

It looks like the functions related to environment maps have changed significantly since you asked this question. For instance, THREE.EquirectangularToCubeGenerator apparently no longer exists. It looks like pmremGenerator.fromEquirectangular is intended as the replacement, but I'm not entirely sure.

Here is my code, which loads an Equirectangular image and converts it to a cube map, then applies it as a background. The exposure can be set with renderer.toneMappingExposure, which works in r112. Note that this is the module version.

new RGBELoader()
.load('filename.hdr', (hdrEquiRect, textureData) => {
        hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(hdrEquiRect);
        pmremGenerator.compileCubemapShader();

        scene.background = hdrCubeRenderTarget.texture;
        renderer.toneMapping = LinearToneMapping;
        renderer.toneMappingExposure = 0.5;
});

This example uses renderer.toneMappingExposure to adjust the exposure of the HDRi background:

https://threejs.org/examples/?q=hdr#webgl_materials_envmaps_hdr

Edit - since r116 you also need to set renderer.toneMapping to LinearToneMapping1.

Alexander Koik-Cestone
  • 56
  • 5