Cube skymap texture archives/websites

I’m looking for a website that has a lot of skymap textures (ie: 6 square images) that can be use to set as the background in ThreeJS and will have a smooth transition from 1 to the ones next to it. Something similar to what the Humus.name website has and I believe that is where the ThreeJS API got most of its cube textures for its examples. I checked a few websites with skymap / fisheye styles images and tried to split them into a few equal sized pieces, but they don’t really transition correctly together, especially the top and bottom images with the side images.

It depends on the type of texture your looking for:

360 realistic photos :point_right: polyhaven.com/hdris
Heavily game-stylised :point_right: skybox.blockadelabs.com
World of Warcraft-style :point_right: env-ai.vercel.app

If you want to transition between skyboxes - consider going for a single equirectangular texture over 6 tiles. Lerping from a single image into another one is relatively trivial compared to trying to synchronise lerping of 6 separate images - you’ll likely see artefacts on the edges of the skybox cube in such a case.

You can place a single texture with mapping set to EquirectangularReflectionMapping (you can also just use Grounded Skybox) - three handles equirectangular maps out of the box, so there’s no need to do anything besides loading that single texture (and if you want to tween between multiple skyboxes, it’s a matter of creating a simple shader with 2 textures a inputs and a single alpha factor to mix between them.)


If for any reason you’d still prefer to stick to 6 tiles over a single equirectangular texture - you can convert equirectangular textures into cubemaps with this tool for example.

mix for two samplerCube works.
Used .onBeforeCompile on the material of scene’s background:

Demo: https://codepen.io/prisoner849/full/jORXEaQ

I don’t know how correct this approach is. I simply dug into WebGLRenderer’s source code :sweat_smile:

3 Likes