Instructions:

Select an image or search for it on sites like Tangram Heightmapper.

They must be black and white images, with the height in grayscale.

• Use the "Select Image" button to load a height map. (You have several by default to try).
• Press left and drag the mouse to rotate the 3D model.
• Right click and drag the mouse to move the 3D model.
• Use the mouse wheel to zoom.
• Adjust the "Height Scale" slider to maximize on the z axis (1:flat, 100:max, default 50).
• Adjust the "Baseline Adjustment" slider to raise/lower sea level, resulting in a change in map colors.
• Turn "Show Contour Lines" on/off and set the "Number of Contour Lines" between 5 and 15.
• Click "Take Screenshot" to export the current image.

About ...

This app is an interactive tool to visualize two-dimensional images as three-dimensional landscapes, using the luminance of the pixel as a height reference.

With a black and white image in gray scale the result is perfect, in color not so much since the luminance is taken, not the chrominance.

The app allows users to transform their own images into navigable 3D models, making it easy to explore hidden patterns and reliefs.

Developed in Three.js, HTML, CSS and JavaScript with the help of AI agents (Gemini canva and github copilot).

Version 1 - July 2025 - victorbarahona.com

Support this and other projects in ko-fi!!

Select a DEM image to render in 3D