Creating a 3D moon with 2d map tiles

Questions
,
1

I wanted to create a 3D model of the moon with a 2D map. But when I am giving the texture as image tiles based on the zoom level, there is significant distortion of the square tiles at the poles. Is there any way to mathematically warp and stitch the tiles to prevent distortion? I tried Decals, but no method works till now.

I have added the observed distortion and the code I have currently used to give the texture

const [zoom, x, y] = tileKey.split('/').map(Number);
        const tilesPerRow = Math.pow(2, zoom);

        const uOffset = x / tilesPerRow;
        const vOffset = y / tilesPerRow;
        const uvScale = 1 / tilesPerRow;

        const geometry = new THREE.SphereGeometry(
            2,
            64,
            64,
            uOffset * Math.PI * 2,
            uvScale * Math.PI * 2,
            vOffset * Math.PI,
            uvScale * Math.PI
        );

        // Create a group to hold both base and overlay meshes
        const group = new THREE.Group();

        // Base material - always created
        const baseMaterial = new THREE.MeshPhongMaterial({
            map: baseTexture,
            combine: THREE.MultiplyOperation,
            shininess: 30
        });
        const baseMesh = new THREE.Mesh(geometry, baseMaterial);
        group.add(baseMesh);

const baseTexture = await loadTexture(`/images/images/${tileKey}.jpg`)
            .catch(() => {
                // Create fallback texture for base layer
                const canvas = document.createElement('canvas');
                canvas.width = canvas.height = 256;
                const ctx = canvas.getContext('2d');
                ctx.fillStyle = '#444444';
                ctx.fillRect(0, 0, 256, 256);
                return new THREE.CanvasTexture(canvas);
            });

image
image831×796 133 KB

2

Are you trying to create a extremely high-quality map with zero distortion?
If not, you can try these options:

  • Get a moon map from NASA that you can map directly onto a sphere. These are fairly high quality and include elevation maps.
  • Use Blender to create your moon. It has several mapping options. Export as glb file and import into three.js.
3

Yes, my aim to create a model similar to google earth where tiles are dynamically rendered based on different zoom levels. Creating different blender models for different zoom levels is my last resort since the loading time will be very high.

4

I am not the expert on this topic, but I know that others have been working hard to make WebGPU capable of handling exactly this task.

In the meantime, if you are trying to map a cylindrical map onto a sphere, one other option might be to start with a cylinder and then bend the shape into a sphere by moving the vertices. This kind of vertex displacement is something that you can easily do in WebGPU and something you should get used to doing if you are planning on creating a true 3D map of the moon.

You should also check out this showcase and search this forum for other discussions on this topic.