HDRI background position

Questions
1

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.


1280Ă—720

2

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?

3

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

Annotation 2020-03-18 185516
Annotation 2020-03-18 1855161316Ă—852 79.1 KB

4

Is this a HDR cube texture?

5

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;
6

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

7

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?

8

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
9

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.

10

I don’t think you understood @ahmafi’s question. They are trying to project the HDRI onto a “ground” surface, which they can place a model onto. They used the gltf example as an example of what they were currently getting, not what they were trying to achieve. They are trying to achieve something like the second picture in their original post, with a model sitting on the ground. The glTF example shows the model floating above the ground.

This is the same problem that is discussed here: Ground projected HDR environment map · Issue #23512 · mrdoob/three.js · GitHub

1 Like
11

Indeed, I’ve marked your post as the solution.