Hello,
I have tried load hdri file here.
I expect this is right example that everyone know.
https://threejs.org/examples/?q=materials#webgl_materials_envmaps
However, we can not upload background map file, because it asks me to upload 6 images.
Then, we separate it 6 images. Thanks to this, I get angular reflected background.
How can I upload just one hdri file?
Hello BuraDacdak,
The example you are mentioning is an “environment mapping” example and there is no HDR. But from what I understand, you wish to use this image mapping technic and instead of using 6 images files, you want to use only one. To achieve such mapping, you can follow the “ocean example” @ https://threejs.org/examples/?q=ocean#webgl_shaders_ocean. The interesting part for your purpose is found lines 136-165:
var cubeMap = new THREE.CubeTexture( [] );
cubeMap.format = THREE.RGBFormat;
var loader = new THREE.ImageLoader();
loader.load( 'textures/skyboxsun25degtest.png', function ( image ) {
var getSide = function ( x, y ) {
var size = 1024;
var canvas = document.createElement( 'canvas' );
canvas.width = size;
canvas.height = size;
var context = canvas.getContext( '2d' );
context.drawImage( image, - x * size, - y * size );
return canvas;
};
cubeMap.images[ 0 ] = getSide( 2, 1 ); // px
cubeMap.images[ 1 ] = getSide( 0, 1 ); // nx
cubeMap.images[ 2 ] = getSide( 1, 0 ); // py
cubeMap.images[ 3 ] = getSide( 1, 2 ); // ny
cubeMap.images[ 4 ] = getSide( 1, 1 ); // pz
cubeMap.images[ 5 ] = getSide( 3, 1 ); // nz
cubeMap.needsUpdate = true;
} );
Yes Thanks! It works. We wanted to use only one image file.
However, we want to get reflection without background image, such as right top image what I updated. Its background is black, but reflects light source and smooth reflected texture.
left top image is what I made. As you can see, this object looks in cube but not real world.
Can I just get above marbles?
Thank you anyway!
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
};
});
Using PMREMGenerator on app level is not necessary with latest releases anymore.
Please always use the latest official examples as a code template. Apply the HDR environment map like in: three.js webgl - GLTFloader
@Mugen87
What is the minimum supported version of this method? Because I need to adapt to the old version
new RGBELoader()
.setPath('textures/equirectangular/')
.load('royal_esplanade_1k.hdr', function (texture) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
});
This is the rendered image after I use this method
This is the rendered image obtained using the previous method
I want to know why the effect is not very good after using the new method. Do I need to adjust something?
PMREMGenerator was integrated into the renderer with r131. The screenshot with the dark cube looks like you are using a three.js version below this release.
