HDRI background position

How can I achieve something like the picture below? Probably with CubeTextures, but how? My problem is that in my scene the 3D object (The car here) is not on the ground, like what we see in this example.


You can apply environment maps in the cube and equirectangular format. PMREMGenerator provides methods for both use cases (.fromEquirectangular() and .fromCubemap()).

How does our scene looks like?

A car that is not on the ground, like the example I mentioned. And I’m setting this CubeTexture to scene background.

Is this a HDR cube texture?

Yes, I’m using it like this:

const loader = new THREE.CubeTextureLoader();
const texture = loader
    .load([
        '../images/env/px.png',
        '../images/env/nx.png',
        '../images/env/py.png',
        '../images/env/ny.png',
        '../images/env/pz.png',
        '../images/env/nz.png'
    ]);
scene.background = texture;

CubeTextureLoader is for LDR env maps only. You have to use a HDR compatible loader like RGBELoader or EXRLoader.

Thanks. But I think it doesn’t solve my main problem. So I should create a cube or 6 planes and put these textures on them?

As shown in the glTF example, it’s best when you use PMREMGenerator and assign the output of .fromEquirectangular() or .fromCubemap() to Scene.background and Scene.environment.

1 Like

Hi,

Can you share the codes for the same? I am a novice developer and feeling difficult to convert your solution into codes to work.

1 Like