Car Hanging in the HDRI background. Unable to ground it in Y Axis

Questions
,
1

Hi There,
I imported car models in to my scenes and used a HDRI background image to showcase as if the cars are in a showroom. But the cars are hanging in the air and not able to ground them in Y Axis.

The ground seems to be in infinite as i move the car in Y Axis.

image
image1175×562 118 KB

please see the code below. If any one can help for a solution with code. React Three Fiber or pure threejs codes are fine for the solution.

import { useLoader, useThree } from "react-three-fiber";

import { TextureLoader, WebGLCubeRenderTarget } from 'three';

import { useMemo } from "react";

const Background = props => {

  const texture = useLoader(TextureLoader, process.env.PUBLIC_URL + '/autoshop.jpg');

  const { gl } = useThree();

  const formatted = useMemo(() => new WebGLCubeRenderTarget(texture.image.height).fromEquirectangularTexture(gl,texture) , []);

  return(

    <primitive attach='background' object={formatted}/>

  )

}

export default Background;
2

Can you show an image of what you’re trying to achieve? What happens if you just move the cars in the y axis?

3

Hi @dubois,

see the below image. I took it from a website using threejs.

image
image952×615 79.2 KB

The bike is very well grounded on the HDRI image.
But when i tried to implement the same with a car, the Y Aixs seems unreachable. I moved the car in Y Axis direction, the car scaled down to a tiny car and the disappeared at a certain point of calculcation down the Y axis.

My requirement is to ground the wheel on the ground of the HDRI image.

I came across a thread HDRI background position but the solution is unclear for me.

Can anyone brief it with a code or an explanation.

4

Link to the motobike showroom (they’re got some attempt to block devtools, you’ll need to disable pause on exceptions and reload).

Recording a frame with spector.js I can see this map (it’s 2048x2048):

env

My guess is they’re mapping this onto the inside of a cube. The motorbike sits inside the cube and casts shadows onto it.

Following this is a typical cube map representing the same scene. It’s tiny, just 64x64x6

cube
cube402×666 174 KB

…plus the other 4 sides.

This cube map is used as the environment map. But it’s not what you see as the scene background.

5

Hi @looeee,
Thanks for the reply.

Yes, i want to achieve same kind of showroom with a car.
Can you let me know how this could be achieved with Three.js PMREMGenerator and place the car on the ground image?

Regards,
Pradeep Selvaraj.