Why I Built It I was always fascinated by AI. How it can help us solve daily problems. Or even a hive solution to problems that were looked at as hard. When people talk about AI. They see big data and algorithms. But I wanted to see the beautiful side of AI. Can it help me build art? Can it be created totally by AI? That's how "3D Heightmap Surface - Pixel Art Visualizer" was created. 3D Heightmap Surface - Pixel Art Visualizer The idea wasn't to create a product. But to see what can be created if you create using AI. I asked an AI assistant (ChatGPT) to help me write a web app that transforms any pixel art into a 3D model. And it gave me an expressive result: a webpage that lets you upload an image, view it as a heightmap, and even download it as a .glb model for use in 3D software like Blender or Unity. What the Project Does The concept is straightforward. Every pixel color determines how high or low the 3D surface should be. So the uploaded pixel art will become a 3D landscape of your art. Upload any pixel art.It then turns pixel brightness into depth.Download the result as a .glb 3D model. Upload any pixel art. It then turns pixel brightness into depth. Download the result as a .glb 3D model. All of it runs entirely in your browser, powered by Three.js no installation required. The Core Code If you are interested in seeing the code, here it is: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Heightmap Surface — Pixel Art Visualizer</title>
<style>
  body { margin: 0; overflow: hidden; background: #111; font-family: Arial, sans-serif; color: white; }
  #controls {
    position: absolute; top: 70px; left: 20px;
    display: flex; gap: 10px;
  }
  input[type="file"], button {
    padding: 10px 15px; font-size: 14px;
    border: none; border-radius: 8px; cursor: pointer;
  }
  input[type="file"] {
    background: #222; color: white;
  }
  button {
    background: #0a84ff; color: white;
  }
  h1 {
    position: absolute; top: 10px; left: 20px;
    font-size: 22px; margin: 0;
  }
  h2 {
    position: absolute; top: 35px; left: 20px;
    font-size: 14px; color: #aaa; margin: 0;
  }
</style>
</head>
<body>
<h1>3D Heightmap Surface</h1>
<h2>Pixel Art Visualizer</h2>

<div id="controls">
  <input type="file" id="imageInput" accept="image/*">
  <button id="saveBtn" disabled>Download Model</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/exporters/GLTFExporter.js"></script>

<script>
let scene, camera, renderer, mesh, controlsEnabled = false;

// Initialize scene
function initScene() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.set(1, 1, 1);
  scene.add(light);
  camera.position.set(0, 1.5, 5);

  animate();
}

function animate() {
  requestAnimationFrame(animate);
  if (mesh && controlsEnabled) mesh.rotation.z += 0.005;
  renderer.render(scene, camera);
}

// Handle image upload
document.getElementById('imageInput').addEventListener('change', event => {
  const file = event.target.files[0];
  if (!file) return;

  const url = URL.createObjectURL(file);
  loadImageAs3D(url);
});

function loadImageAs3D(imageURL) {
  const loader = new THREE.TextureLoader();
  loader.load(imageURL, texture => {
    if (mesh) scene.remove(mesh); // remove old mesh

    const geometry = new THREE.PlaneGeometry(5, 5, 128, 128);
    const material = new THREE.MeshStandardMaterial({
      map: texture,
      displacementMap: texture,
      displacementScale: 1,
      color: 0xcccccc,
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.x = -Math.PI / 2.5;
    scene.add(mesh);
    controlsEnabled = true;

    document.getElementById('saveBtn').disabled = false;
  });
}

// Download model as .glb
document.getElementById('saveBtn').addEventListener('click', () => {
  if (!mesh) return;
  const exporter = new THREE.GLTFExporter();
  exporter.parse(mesh, result => {
    const blob = new Blob([JSON.stringify(result)], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'model.glb';
    a.click();
    URL.revokeObjectURL(url);
  });
});

initScene();
</script>
</body> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Heightmap Surface — Pixel Art Visualizer</title>
<style>
  body { margin: 0; overflow: hidden; background: #111; font-family: Arial, sans-serif; color: white; }
  #controls {
    position: absolute; top: 70px; left: 20px;
    display: flex; gap: 10px;
  }
  input[type="file"], button {
    padding: 10px 15px; font-size: 14px;
    border: none; border-radius: 8px; cursor: pointer;
  }
  input[type="file"] {
    background: #222; color: white;
  }
  button {
    background: #0a84ff; color: white;
  }
  h1 {
    position: absolute; top: 10px; left: 20px;
    font-size: 22px; margin: 0;
  }
  h2 {
    position: absolute; top: 35px; left: 20px;
    font-size: 14px; color: #aaa; margin: 0;
  }
</style>
</head>
<body>
<h1>3D Heightmap Surface</h1>
<h2>Pixel Art Visualizer</h2>

<div id="controls">
  <input type="file" id="imageInput" accept="image/*">
  <button id="saveBtn" disabled>Download Model</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/exporters/GLTFExporter.js"></script>

<script>
let scene, camera, renderer, mesh, controlsEnabled = false;

// Initialize scene
function initScene() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.set(1, 1, 1);
  scene.add(light);
  camera.position.set(0, 1.5, 5);

  animate();
}

function animate() {
  requestAnimationFrame(animate);
  if (mesh && controlsEnabled) mesh.rotation.z += 0.005;
  renderer.render(scene, camera);
}

// Handle image upload
document.getElementById('imageInput').addEventListener('change', event => {
  const file = event.target.files[0];
  if (!file) return;

  const url = URL.createObjectURL(file);
  loadImageAs3D(url);
});

function loadImageAs3D(imageURL) {
  const loader = new THREE.TextureLoader();
  loader.load(imageURL, texture => {
    if (mesh) scene.remove(mesh); // remove old mesh

    const geometry = new THREE.PlaneGeometry(5, 5, 128, 128);
    const material = new THREE.MeshStandardMaterial({
      map: texture,
      displacementMap: texture,
      displacementScale: 1,
      color: 0xcccccc,
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.x = -Math.PI / 2.5;
    scene.add(mesh);
    controlsEnabled = true;

    document.getElementById('saveBtn').disabled = false;
  });
}

// Download model as .glb
document.getElementById('saveBtn').addEventListener('click', () => {
  if (!mesh) return;
  const exporter = new THREE.GLTFExporter();
  exporter.parse(mesh, result => {
    const blob = new Blob([JSON.stringify(result)], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'model.glb';
    a.click();
    URL.revokeObjectURL(url);
  });
});

initScene();
</script>
</body> </html> </html> That’s it. Just run it in a code editor and view it. And it you want to view it directly here it is. here it is No backend, no framework, just HTML and JavaScript—this simple. How AI Helped AI didn’t just write the code; it accelerated the entire development process. Here's what I used it for. Understanding how to use Three.js displacement mapsTroubleshooting missing exports and blank screens. Because it would show a black screen without anything on it. Generating a readable interfaceWriting explanations so I can understand the mistakes if I want to build it later. Understanding how to use Three.js displacement maps Troubleshooting missing exports and blank screens. Because it would show a black screen without anything on it. Generating a readable interface Writing explanations so I can understand the mistakes if I want to build it later. The Bigger Idea Projects like this are small, but their meaning is big. Not just for me. They show how AI collaboration can expand human creativity, not replace it. It shows another face of AI that we don't usually pay attention to. Final Thoughts AI doesn’t stop the creative process; it extends it. It turns coding into a conversation between curiosity and the possibility of making new beautiful components. This 3D heightmap surface is more than a fun experiment; it’s proof that AI can help anyone bring visual ideas to life, one pixel at a time.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Turning Pixel Art into 3D: Building a Heightmap Visualizer with AI Guidance

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Building a DIY Keypad Circuit With Diodes and AI Tools

Why Multimodal AI Broke the Data Pipeline — And How Daft Is Beating Ray and Spark to Fix It

The Void at the Center of AI Adoption

RISE Isn’t a Silver Bullet: A Brownfield-vs-Greenfield Decision Framework

3 Common Types of 3D Sensors: Stereo, Structured Light, and ToF

Building a DIY Keypad Circuit With Diodes and AI Tools

Why Multimodal AI Broke the Data Pipeline — And How Daft Is Beating Ray and Spark to Fix It

The Void at the Center of AI Adoption

RISE Isn’t a Silver Bullet: A Brownfield-vs-Greenfield Decision Framework

3 Common Types of 3D Sensors: Stereo, Structured Light, and ToF

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps