●
3DAI

Equirectangular to Cubemap Converter

Drop a 2:1 360 panorama and get the 6 cube faces for three.js, Unity, Unreal or Godot: separate images, a cross or a strip. It all runs in your browser.

Free · no signup · your panorama stays in your browser

Loading the converter...

Make a 360 skybox with AI

Describe a sky or a place and get a 360 panorama to turn into a cubemap here.

Texture your 3D model with AI

Upload a GLB, OBJ or FBX, describe the look, and AI paints it from every side.

How to convert a panorama to a cubemap

  1. 1

    Add your panorama

    Drop a 2:1 equirectangular JPG, PNG or WebP (a 360 photo or an HDRI preview), or try the sample.

  2. 2

    Pick engine and size

    Choose the face order for your engine, a face size (auto is width / 4) and a yaw offset if the front is not where you want it.

  3. 3

    Check it in 3D

    The labelled faces and a drag-to-look 3D preview show the cube exactly as you will download it.

  4. 4

    Download

    Save 6 faces as a ZIP or one by one, or one image as a horizontal cross, vertical cross or 6x1 strip.

Use the cubemap in three.js, Unity, Unreal or Godot

three.js

  1. Pick the three.js preset and download the ZIP (px, nx, py, ny, pz, nz).
  2. Load them in that order: new THREE.CubeTextureLoader().load([px, nx, py, ny, pz, nz]).
  3. Set scene.background (and scene.environment for reflections) to the texture, with colorSpace = THREE.SRGBColorSpace.

Unity

  1. Pick the Unity preset and the Horizontal cross (4x3) layout, then download the PNG.
  2. In Unity, select the image, set Texture Shape to Cube and click Apply; the cross is detected automatically.
  3. Assign it to a Skybox/Cubemap material and set that material in Lighting > Environment > Skybox Material.

Unreal Engine

  1. For a sky, Unreal imports a long-lat .hdr directly as a Texture Cube; use your original HDR file if you have it.
  2. For a DDS cube or a cubemap made in another tool, pick the Unity / DirectX preset: it uses the DirectX +X, -X, +Y, -Y, +Z, -Z face order that DDS cube tools expect.
  3. Assemble the 6 faces into a DDS cubemap with a DDS tool, import it, and use it in a sky sphere or a Sky Light set to a specified cubemap.

Godot 4

  1. Pick the Godot preset and the Strip 6x1 layout (X+, X-, Y+, Y-, Z+, Z-).
  2. In the Import dock, set Import As to Cubemap, Slices to 6x1, and reimport.
  3. Sample it in a sky or spatial shader with texture(cubemap, EYEDIR). For a plain sky, Godot can also use the panorama directly in a PanoramaSkyMaterial.

Cubemap face order by engine

Each engine stores the same 6 views under different names, and some store them mirrored or turned, so the presets do more than rename files. three.js mirrors x when it reads a CubeTexture, so its px face is the view to the left. Godot uses its own -Z forward axes without that mirror.

Face (Unity axes)three.jsUnity / DirectXGodot 4
Rightnx (2nd)Right +X (1st)X+ (1st)
Leftpx (1st)Left -X (2nd)X- (2nd)
Uppy (3rd)Up +Y (3rd)Y+ (3rd)
Downny (4th)Down -Y (4th)Y- (4th)
Front (image centre at yaw 0)nz (6th)Front +Z (5th)Z- (6th)
Backpz (5th)Back -Z (6th)Z+ (5th)

Layouts: 6 separate images, horizontal cross (4x3, -X +Z +X -Z across the middle), vertical cross (3x4, -Z under -Y turned 180°) and a 6x1 strip in +X -X +Y -Y +Z -Z order.

More free texture tools

Normal map generator

Turn a photo into a normal map for your materials.

DDS to PNG

Open DDS textures and cubemaps and save each face as PNG.

3D model viewer

Preview GLB, OBJ, FBX and STL files in the browser.

Frequently Asked Questions

An equirectangular (lat-long) panorama stores a full 360 x 180 degree view in one 2:1 image. A cubemap stores the same view as 6 square images, one for each side of a cube around the camera. Games and 3D engines often sample cubemaps faster and with less distortion near the poles, so skyboxes and reflection maps are usually cubemaps.
Auto uses the panorama width divided by 4, which keeps about the same detail at the horizon as the source (a 4096 x 2048 panorama gives 1024 px faces). A bigger face only adds blur, not detail. Use 512 or 1024 for reflections and mobile, and 2048 for a sharp skybox from an 8K panorama.
All three list faces as +X, -X, +Y, -Y, +Z, -Z, but the axes point different ways. three.js names them px, nx, py, ny, pz, nz and mirrors x, Unity calls them Right, Left, Up, Down, Front, Back with +Z forward, and Godot uses X+ to Z- with -Z forward. Pick your engine and the tool writes the faces in the right place and orientation.
The Unity Skybox/6 Sided material has its own slot labels. Match each file by the axis in brackets, not by the word, or use the Horizontal cross layout with Texture Shape set to Cube, which needs no slot matching.
At yaw 0 the centre of your panorama becomes the Front face. When three.js shows a panorama directly as an equirectangular background, its default camera looks at the point a quarter of the way into the image instead. Set yaw to -90 to match that view exactly, or turn the cube to any angle you like with the yaw slider.
This tool reads JPG, PNG and WebP, so it works on an 8-bit preview of an HDRI (tone-mapped). For lighting with real HDR values, import the .hdr or .exr directly in your engine: Unreal, Unity, Godot and three.js all read lat-long HDRIs.
A full equirectangular panorama is exactly twice as wide as it is tall. Other shapes are converted as if they covered the full sphere, so the result will look stretched. Partial panoramas should be padded to 2:1 (empty sky and ground) first.
No. The conversion runs in your browser, in a background worker, and the image never leaves your device. There is no signup and no limit on how many panoramas you convert.
Each face pixel is the average of 4 bilinear samples instead of 1. This removes jagged lines and shimmer when the faces are smaller than the panorama detail, for example 512 px faces from an 8K panorama. It is about 4 times slower and is on by default.

Unity, Unreal Engine, Godot and three.js are named only to describe compatibility; The3DAI is not affiliated with or endorsed by them.