How to apply HDRI(env)?

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!