Projective skybox

Discussion
,
1

PlayCanvas has a sweet “projective skybox” example. The ground of the skybox is projected so it seems as if the floating object is actually on the floor of the room depicted in the skybox. Easier to just see:

https://playcanvas.com/project/985028/overview/projective-skybox

I wasn’t able to find if anyone has done this with three. Would be sweet to get an example going.

2

Would it work if the skybox textures are actually mapped onto a room-size box near the view point, instead of being applied to the scene background or some extremely large box? In this way the motion of camera will lead to a noticeable parallax.

3

We cannot just put the object on the bottom of the skybox, that won’t look the same at all.

1 Like
4

The Drei library has a simple to use Environment component that can project the environment HDR onto a plane inside a sphere. Use the ground attribute to adjust radius, height & scale. It looks quite good with little effort.

Sample JSX

<Environment
      preset="sunset"
      background
      ground={{
        height: 10,
        radius: 115,
        scale: 100
      }}
    />

Example 1 : Advancing GLTF Scenes - React Three Fiber Tutorials
image

Example 2 : Material Picker - React Three Fiber Tutorials
image

Other than this method, I would try to project the image using blenders UV projection and then export.

2 Likes
5

Maybe this:
https://threejs.org/examples/?q=env#webgl_materials_envmaps_groundprojected
image

3 Likes
6

Yes, you are right. It will work only if the 6 textures are well aligned along the box edges (which is rarely the case).

1 Like