我想使用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
是要替换的,但我不确定。
这是我的代码,它将加载等角图像并将其转换为立方体贴图,然后将其用作背景。可以使用在r112中起作用的renderer.toneMappingExposure
设置曝光。请注意,这是模块版本。
new RGBELoader() .setDataType(THREE.UnsignedByteType) .load('filename.hdr', (hdrEquiRect, textureData) => { hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(hdrEquiRect); pmremGenerator.compileCubemapShader(); scene.background = hdrCubeRenderTarget.texture; hdrCubeRenderTarget.mapping = THREE.CubeRefractionMapping; renderer.toneMappingExposure = 0.5; });
此示例使用
renderer.toneMappingExposure
调整HDRi背景的曝光:
https://threejs.org/examples/?q=hdr#webgl_materials_envmaps_hdr