Блог

Я хочу использовать 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();
})
}
  

Это мой код. и

 console.log(textureData)
  

Приведенные выше результаты кода хорошо показывают исправленные значения.
Но экспозиция cubemap не меняется.

Другая проблема заключается в чтении файла .ibl. Я должен прочитать положение солнца в webgl, но я не могу прочитать файл. Я использую webpack. библиотека fs не существует.

Я также пытался настроить экспозицию с помощью RGBELoader. Похоже, вам нужно установить это как свойство для средства визуализации, поскольку перечисленные вами свойства возвращаются модулем только в функции обратного вызова. Они ничего не «устанавливают».

Похоже, что функции, связанные с картами окружения, значительно изменились с тех пор, как вы задали этот вопрос. Например, THREE.EquirectangularToCubeGenerator по-видимому, больше не существует. Похоже, что pmremGenerator.fromEquirectangular это предназначено в качестве замены, но я не совсем уверен.

Вот мой код, который загружает равноугольное изображение и преобразует его в карту куба, затем применяет его в качестве фона. Экспозицию можно установить с помощью renderer.toneMappingExposure , которая работает в r112. Обратите внимание, что это версия модуля.

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

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

В этом примере используется renderer.toneMappingExposure для настройки экспозиции фона HDRi:

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

Редактировать — начиная с r116, вам также нужно установить renderer.toneMapping значение LinearToneMapping ¹.