3D-Octagon-MAP

by velo_ninja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gapless Hexagon Grid – Improved Water & Varied Terrain</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<!-- External Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script>
  // === SETUP SCENE, CAMERA, RENDERER, CONTROLS ===
  const scene = new THREE.Scene();
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
  camera.position.set(15, 20, 15);
  camera.lookAt(0, 0, 0);
  
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.target.set(0,0,0);
  controls.update();
  
  // === GLOBAL GRID PARAMETERS (Flat-Topped, Gapless) ===
  // In a flat-topped hexagon, if r is the distance from center to vertex:
  // - The hexagon’s width = 2 * r.
  // - Its height = Math.sqrt(3)*r.
  // Center-to-center horizontal distance = 1.5 * r.
  // Center-to-center vertical distance = Math.sqrt(3) * r.
  const r = 1;             // Hexagon “radius”
  const tileHeight = 0.2;    // Extrusion height for the tile
  const borderWidth = 0.0;   // No extra gap or overlay; borders are drawn exactly along edges
  
  const horizDist = 1.5 * r;
  const vertDist = Math.sqrt(3) * r;
  const cols = 10, rows = 10;
  
  // === CREATE BASE HEXAGON TILE (Perfect, Gapless) ===
  // This function creates a perfectly regular flat-topped hexagon extruded by a fixed height.
  // It also adds a 1px black border along its edge.
  function createHexTile(r, height,...