I made a small free tool with three.js: drop in a flat map (a real world map, a fantasy continent or a planet texture) and it’s wrapped around a sphere you can spin and zoom. You can add an atmosphere glow, pick a dark, light or transparent background, and download a PNG of the current view. Everything runs in the browser; the image is never uploaded.
A few implementation notes, in case they’re useful to someone:
-
three.js is loaded with a dynamic import(), so the page’s HTML and text appear before the WebGL part.
-
The globe is a SphereGeometry(1, 128, 96) with MeshBasicMaterial, unlit on purpose, so the map’s colours come out exactly as in the image.
-
Textures use SRGBColorSpace and the GPU’s max anisotropy. Maps wider than maxTextureSize are scaled down on a 2D canvas first. A smaller version loads first, then a 4K one replaces it if the GPU supports 4096 px textures.
-
The atmosphere is a slightly larger sphere (radius 1.14) rendered BackSide with additive blending and a tiny fresnel-style shader: pow(0.66 - dot(normal, viewDir), 3.2).
-
The transparent PNG is just WebGLRenderer({ alpha: true, preserveDrawingBuffer: true }), setClearColor(0x000000, 0) and canvas.toBlob().
-
Drag and pinch use pointer events; zoom moves the camera between z = 1.7 and 8, and the auto-spin pauses for a moment after you interact.
The same site has a cubemap generator that does the equirectangular-to-cubemap conversion in plain TypeScript (no WebGL), with faces in the OpenGL/three.js order px, nx, py, ny, pz, nz, so the six files drop straight into CubeTextureLoader: Cubemap Generator — Free Panorama to Cubemap Converter Online
Feedback welcome.