Hexagonal tile factory example

jasonsturges · Dec 1, 2024 · b662b8c · b662b8c
1 parent 38c6565
commit b662b8c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/examples/factory/hexagonal-tile.html b/examples/factory/hexagonal-tile.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Three Low Poly</title>
+    <style>
+      body {
+        margin: 0;
+      }
+      canvas {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module">
+      import * as THREE from "three";
+      import GUI from "lil-gui";
+      import { createOrbitScene } from "../utils/orbitScene.js";
+      import { ColorPalette, createHexagonalTile } from "../../src/index.js";
+
+      const { scene, camera, controls } = createOrbitScene();
+      camera.position.set(0, 5, 5);
+
+      // Default parameters for the hexagonal tile floor
+      const params = {
+        width: 10,
+        depth: 10,
+        height: 0.01,
+        radius: 0.1,
+        gap: 0.01,
+        material: new THREE.MeshStandardMaterial({ color: ColorPalette.TITANIUM_WHITE }),
+      };
+
+      let hexTileFloor;
+
+      // lil-gui setup
+      const gui = new GUI();
+      gui.add(params, "width", 5, 20, 0.01).name("Width").onChange(updateFloor);
+      gui.add(params, "depth", 5, 20, 0.01).name("Depth").onChange(updateFloor);
+      gui.add(params, "height", 0.01, 1, 0.01).name("Tile Height").onChange(updateFloor);
+      gui.add(params, "radius", 0.1, 2, 0.01).name("Tile Radius").onChange(updateFloor);
+      gui.add(params, "gap", 0, 0.01, 0.001).name("Tile Gap").onChange(updateFloor);
+
+      // Function to update the hexagonal tile floor
+      function updateFloor() {
+        if (hexTileFloor) scene.remove(hexTileFloor);
+        hexTileFloor = createHexagonalTile(params);
+        scene.add(hexTileFloor);
+      }
+
+      // Initial floor creation
+      updateFloor();
+    </script>
+  </body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -176,6 +176,7 @@ <h2>Factory</h2>
           <ul>
             <li><a href="/three-low-poly/factory/row-of-books-by-count">Books (by Count)</a></li>
             <li><a href="/three-low-poly/factory/row-of-books-by-length">Books (by Length)</a></li>
+            <li><a href="/three-low-poly/factory/hexagonal-tile">Hexagonal Tile</a></li>
           </ul>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -176,6 +176,7 @@ <h2>Factory</h2> @@
               <ul>
                 <li><a href="/three-low-poly/factory/row-of-books-by-count">Books (by Count)</a></li>
                 <li><a href="/three-low-poly/factory/row-of-books-by-length">Books (by Length)</a></li>
+                <li><a href="/three-low-poly/factory/hexagonal-tile">Hexagonal Tile</a></li>
               </ul>
             </div>
@@ Expand Down @@