Three.js GroundedSkyBox Environment
This is a three.js mixed environment implementation that uses a GroundedSkyBox, a pre-rendered cubic or equirectangular texture created in 3ds Max or Blender, for the background, while only the 3D elements in the foreground are rendered in real time by three.js. Since the GroundedSkyBox is just a texture, the setup is lightweight yet still provides an immersive experience.
Screenshot #1 – The background is a blurry 360° panoramic cubic texture (GroundedSkyBox).
Screenshot #2 – Zoomed out view showing the 3D platform inside the GroundedSkyBox.
GroundedSkyBox texture - rendered with 3ds Max Vray.
Why GroundedSkyBox?
Unlike a full 3D environment—which remains resource-heavy even with LOD (Level of Detail) optimizations—this approach is far more memory-efficient, delivering smoother performance and a better overall experience.
Demos
Try Mixed Reality (lightweight): Serini City
Only part of Serini City’s 3D assets are loaded, while the background is a 360° panoramic GroundedSkyBox. This results in much faster loading compared to rendering an entire game map.
Evaluate Full 3D (heavy): Crateria City
Crateria City loads the entire map at once, which significantly increases loading times—especially on mobile devices or lower-spec hardware.
Resources
2 Likes
The experience is inherently subjective phenomenon, so a good experience for one person is not necessarily good for another.
Replacing the far objects with a texture is a good idea, but I think you need to improve the transition between 2D panorama and the actual 3D models. Making a smooth transition will improve even more the user experience.
3 Likes
Thank you for exploring this project! Your suggestions mean a lot and help us improve it further.
We’ll look into adding a tweening effect to animate the transition between two background textures. We’ll also increase the number of cubic textures and place them closer together so the transition appears smoother and less noticeable.
2 Likes
Blender 2 sided material does not apply in three.js
the backface material is mirrored even if I have used 2 sided materials in blender?
1 Like
Yeah using doublesided doesn’t flip UVs on the other side. instead you can use keep single sided, and merge in another 180degree rotated geometry.
let front=new THREE.PlaneGeometry()
let back=front.clone()
back.rotateY(Math.PI*.5)
front = BufferGeometryUtils.mergeGeometries([back,front])
2 Likes
Thanks so much, this solution works, the blender double sided material doesn’t actually reflects on three.js, I cloned the plane and then rotated 180 facing backward.
Location: https://theneoverse.web.app#serini&&serini&&loc=platform1_edge002,-1226,6.7,-3323,156
2 Likes
I added a button (Pin Map) at the bottom right that shares the current position in the map, in the image above I placed my logo on the shop front as my virtual address in the map.
I added this feature because of me having to console the character location, the zone its at, and the direction the avatar is facing and I have to put it together manually on the notepad just to come up with the location link which often doesn’t work the first time, with this button I only have to copy it and paste.
Button:
Then this modal will appear with the location link in the map.
Click the button Copy to copy to clipboard the location link.
1 Like
