How to add a background scene more realistic like http://www.plus360degrees.com/uxcars/?

[subhendukundu]

Hey team, I started playing around the threejs for a few days now. I was trying to add a realistic background. The only example I found is http://www.plus360degrees.com/uxcars/
How do I achieve this with react-three-fiber? Any examples would be really helpful.

[drcmda]

that's just a cube texture on the scene.background https://codesandbox.io/s/r3f-ibl-envmap-simple-p5zf9

[drcmda]

i think other formats are fine, too - i just took this from a three/examples demo. there are multiple loaders for cube textures.

[subhendukundu]

Got it. I saw the object is floating, how do I place it on the ground?
I tried to put the z to 0. :(

<Canvas
        colorManagement
        camera={{ position: [3, 3, 0], fov: 15 }}
      >
        <fog attach="fog" args={['#eeeeee', 10, 50]} />
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <Suspense fallback={<Dom center>loading ...</Dom>}>
          <Environment background />
          <Model
            bodyColor={color} brakeColor={brakeColor}
            glassColor={glassColor} moving={moving}
          />
        </Suspense>
        <OrbitControls />
      </Canvas>

[drcmda]

z is 0 by default, and it's depth. what you want is height (y). put the model on a minus y, then it sits lower.

[subhendukundu]

I tried to do that, but not working. What am I missing? :(
https://codesandbox.io/s/react-threejs-car-fou12

[drcmda]

the envmap makes no sense for your case because it was taken next to a wall: https://codesandbox.io/s/react-threejs-car-9bxke you need one where there's anough space in the middle. the effect you're after is smokes and mirrors anyway, you can make it "look like as if" but you'll always have weird distortions unless you build a real model of the environment instead of a cubemap.