@loonylabs/create-game 0.1.0

package/template/apps/client/src/renderer/dungeon.ts

@@ -0,0 +1,250 @@
+/**
+ * @file renderer/dungeon.ts
+ * Dungeon mesh builder — converts a Dungeon data structure into Three.js geometry.
+ *
+ * Responsibilities:
+ *   - Build a THREE.Group of floor/wall/door meshes from a Dungeon object
+ *   - Assign shader materials via ShaderManager
+ *   - Dispose all geometry and materials when the dungeon is swapped
+ *
+ * What does NOT belong here:
+ *   - Entity rendering (→ renderer/entities.ts)
+ *   - Dungeon generation logic (→ packages/core)
+ *   - Game loop / animation (→ game.ts)
+ */
+
+import * as THREE from 'three';
+import { CELL_VISUALS } from '../../../game-data/src/dungeon/cell-visuals.js';
+import type { Dungeon, CellType } from '@loonylabs/gamedev-core';
+import { ProceduralShaderMaterial, ShaderManager } from '@loonylabs/gamedev-client';
+import { DUNGEON_SHADERS } from './shaders/shaderConfig.js';
+
+function isWebGL2Available(): boolean {
+  try {
+    const canvas = document.createElement('canvas');
+    return !!canvas.getContext('webgl2');
+  } catch {
+    return false;
+  }
+}
+
+function createMaterial(
+  type: CellType,
+  color: number,
+  useShaders: boolean,
+  shaderManager?: ShaderManager,
+): THREE.Material {
+  const shaderConfig = DUNGEON_SHADERS[type];
+  if (useShaders && shaderConfig) {
+    const mat = new ProceduralShaderMaterial(shaderConfig, new THREE.Color(color), { glowColor: shaderConfig.glowColor });
+    shaderManager?.register(mat);
+    return mat;
+  }
+  return new THREE.MeshLambertMaterial({ color });
+}
+
+export function buildDungeonMesh(dungeon: Dungeon, shaderManager?: ShaderManager): THREE.Group {
+  const useShaders = isWebGL2Available();
+  const group = new THREE.Group();
+
+  // Count cells per type across all rooms
+  const typeCounts: Partial<Record<CellType, number>> = {};
+  for (const room of dungeon.rooms) {
+    for (const row of room.grid.cells) {
+      for (const cell of row) {
+        const visual = CELL_VISUALS[cell.type];
+        if (visual) typeCounts[cell.type] = (typeCounts[cell.type] ?? 0) + 1;
+      }
+    }
+  }
+
+  // Build InstancedMesh per type
+  const meshes: Partial<Record<CellType, THREE.InstancedMesh>> = {};
+  for (const [typeStr, count] of Object.entries(typeCounts)) {
+    const type = typeStr as CellType;
+    const visual = CELL_VISUALS[type];
+    if (!visual || !count) continue;
+    const geo = new THREE.BoxGeometry(1, visual.height, 1);
+    const mat = createMaterial(type, visual.color, useShaders, shaderManager);
+    meshes[type] = new THREE.InstancedMesh(geo, mat, count);
+    group.add(meshes[type]!);
+  }
+
+  const indices: Partial<Record<CellType, number>> = {};
+  const dummy = new THREE.Object3D();
+
+  for (const room of dungeon.rooms) {
+    const ox = room.worldOffset.x;
+    const oy = room.worldOffset.y;
+    for (const row of room.grid.cells) {
+      for (const cell of row) {
+        const visual = CELL_VISUALS[cell.type];
+        const mesh = meshes[cell.type];
+        if (!visual || !mesh) continue;
+        const idx = indices[cell.type] ?? 0;
+        // Floors at elevated positions; walls stay at ground level
+        const baseY = cell.type === 'floor' || cell.type === 'spawn' ? cell.height : 0;
+        dummy.position.set(ox + cell.x, baseY + visual.height / 2, oy + cell.y);
+        dummy.updateMatrix();
+        mesh.setMatrixAt(idx, dummy.matrix);
+        indices[cell.type] = idx + 1;
+      }
+    }
+  }
+
+  for (const mesh of Object.values(meshes)) {
+    if (mesh) mesh.instanceMatrix.needsUpdate = true;
+  }
+
+  // Debug: plain-colored markers above elevated floor cells (shader-independent)
+  addHeightDebugMarkers(dungeon, group);
+
+  // Add side walls to fill vertical gaps between different-height floor cells
+  buildSideWalls(dungeon, group, useShaders, shaderManager);
+  // Add stair step meshes at height transitions
+  buildStairMeshes(dungeon, group);
+
+  return group;
+}
+
+const HEIGHT_MARKER_COLORS = [0xff8800, 0x00ccff, 0xff00ff, 0xffff00]; // orange, cyan, magenta, yellow
+
+function addHeightDebugMarkers(dungeon: Dungeon, group: THREE.Group): void {
+  for (const room of dungeon.rooms) {
+    const ox = room.worldOffset.x;
+    const oz = room.worldOffset.y;
+    for (const row of room.grid.cells) {
+      for (const cell of row) {
+        if (cell.height === 0) continue;
+        const color = HEIGHT_MARKER_COLORS[(cell.height - 1) % HEIGHT_MARKER_COLORS.length];
+        const geo = new THREE.BoxGeometry(0.6, 0.3, 0.6);
+        const mat = new THREE.MeshBasicMaterial({ color });
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.position.set(ox + cell.x, cell.height + 0.25, oz + cell.y);
+        group.add(mesh);
+      }
+    }
+  }
+}
+
+const SIDE_WALL_COLOR = 0x666666;
+const DIRS_4 = [
+  { dx: 1, dz: 0 },
+  { dx: -1, dz: 0 },
+  { dx: 0, dz: 1 },
+  { dx: 0, dz: -1 },
+];
+
+function buildSideWalls(
+  dungeon: Dungeon,
+  group: THREE.Group,
+  useShaders: boolean,
+  shaderManager?: ShaderManager,
+): void {
+  const mat = useShaders
+    ? (() => { const wallCfg = DUNGEON_SHADERS['wall']; const m = new ProceduralShaderMaterial(wallCfg, new THREE.Color(SIDE_WALL_COLOR), { glowColor: wallCfg.glowColor }); shaderManager?.register(m); return m; })()
+    : new THREE.MeshLambertMaterial({ color: SIDE_WALL_COLOR });
+
+  // Collect all elevated floor cells and check each cardinal direction
+  for (const room of dungeon.rooms) {
+    const ox = room.worldOffset.x;
+    const oz = room.worldOffset.y;
+    for (const row of room.grid.cells) {
+      for (const cell of row) {
+        if (cell.type !== 'floor' && cell.type !== 'spawn') continue;
+        if (cell.height === 0) continue;
+
+        for (const { dx, dz } of DIRS_4) {
+          // Find neighbor cell height (search all rooms)
+          const nx = cell.x + dx;
+          const nz = cell.y + dz;
+          let neighborHeight = 0;
+
+          // Check within same room
+          const nCell = room.grid.cells[nz]?.[nx];
+          if (nCell) {
+            if (nCell.type === 'wall' || nCell.type === 'empty' || nCell.type === 'door') continue; // wall handles its own gap
+            neighborHeight = nCell.height;
+          }
+          // else: out of room bounds → treat as ground level
+
+          const gapHeight = cell.height - neighborHeight;
+          if (gapHeight <= 0) continue;
+
+          // Build a side wall panel filling the vertical gap
+          const panelH = gapHeight;
+          const panelW = 1.0;
+          const panelD = 0.12;
+
+          const geo = new THREE.BoxGeometry(
+            dx !== 0 ? panelD : panelW,
+            panelH,
+            dz !== 0 ? panelD : panelW,
+          );
+          const mesh = new THREE.Mesh(geo, mat);
+          mesh.position.set(
+            ox + cell.x + dx * 0.5,
+            neighborHeight + panelH / 2,
+            oz + cell.y + dz * 0.5,
+          );
+          group.add(mesh);
+        }
+      }
+    }
+  }
+}
+
+function buildStairMeshes(dungeon: Dungeon, group: THREE.Group): void {
+  const mat = new THREE.MeshLambertMaterial({ color: 0xff00aa }); // hot pink for debug visibility
+
+  for (const room of dungeon.rooms) {
+    const ox = room.worldOffset.x;
+    const oz = room.worldOffset.y;
+    for (const row of room.grid.cells) {
+      for (const cell of row) {
+        if (cell.type !== 'floor' && cell.type !== 'spawn') continue;
+
+        for (const { dx, dz } of DIRS_4) {
+          const nx = cell.x + dx;
+          const nz = cell.y + dz;
+          const nCell = room.grid.cells[nz]?.[nx];
+          if (!nCell) continue;
+          if (nCell.type !== 'floor' && nCell.type !== 'spawn') continue;
+
+          const hDiff = nCell.height - cell.height;
+          if (hDiff !== 1) continue; // only render step from lower → higher
+
+          // Place a small step box at the boundary between the two cells
+          const stepGeo = new THREE.BoxGeometry(
+            dx !== 0 ? 0.5 : 1.0,
+            0.15,
+            dz !== 0 ? 0.5 : 1.0,
+          );
+          const stepMesh = new THREE.Mesh(stepGeo, mat);
+          stepMesh.position.set(
+            ox + cell.x + dx * 0.4,
+            cell.height + 0.075,
+            oz + cell.y + dz * 0.4,
+          );
+          group.add(stepMesh);
+        }
+      }
+    }
+  }
+}
+
+export { buildStairMeshes };
+
+export function disposeMesh(group: THREE.Group, shaderManager?: ShaderManager): void {
+  group.traverse(obj => {
+    if (obj instanceof THREE.Mesh) {
+      obj.geometry.dispose();
+      const disposeMat = (m: THREE.Material) => {
+        if (m instanceof ProceduralShaderMaterial) shaderManager?.unregister(m);
+        m.dispose();
+      };
+      if (Array.isArray(obj.material)) obj.material.forEach(disposeMat);
+      else disposeMat(obj.material);
+    }
+  });
+}

package/template/apps/client/src/renderer/dungeonPortal.ts

@@ -0,0 +1,73 @@
+/**
+ * Dungeon portal mesh — visible archway with glowing light.
+ * Zero-asset: Two pillars + top bar + point light.
+ */
+import * as THREE from 'three';
+
+/**
+ * Create a dungeon portal at the given world position.
+ * @param x World X coordinate (center of portal)
+ * @param z World Z coordinate (center of portal)
+ * @param getTerrainHeight Function to get terrain height at (x, z)
+ */
+export function createDungeonPortal(
+  x: number,
+  z: number,
+  getTerrainHeight: (x: number, z: number) => number,
+): THREE.Group {
+  const group = new THREE.Group();
+  const groundY = getTerrainHeight(x, z) ?? 28;
+
+  const pillarMat = new THREE.MeshStandardMaterial({ color: 0x3a2050, roughness: 0.7 });
+  const pillarGeo = new THREE.BoxGeometry(0.6, 5, 0.6);
+
+  // Left pillar
+  const leftPillar = new THREE.Mesh(pillarGeo, pillarMat);
+  leftPillar.position.set(-2, groundY + 2.5, 0);
+  group.add(leftPillar);
+
+  // Right pillar
+  const rightPillar = new THREE.Mesh(pillarGeo, pillarMat);
+  rightPillar.position.set(2, groundY + 2.5, 0);
+  group.add(rightPillar);
+
+  // Top bar (lintel)
+  const lintelGeo = new THREE.BoxGeometry(5, 0.6, 0.6);
+  const lintel = new THREE.Mesh(lintelGeo, pillarMat);
+  lintel.position.set(0, groundY + 5.2, 0);
+  group.add(lintel);
+
+  // Rune stones at base
+  const runeMat = new THREE.MeshStandardMaterial({ color: 0x6040a0, emissive: 0x301860, roughness: 0.6 });
+  const runeGeo = new THREE.BoxGeometry(0.3, 0.8, 0.3);
+  for (let i = -1; i <= 1; i++) {
+    const rune = new THREE.Mesh(runeGeo, runeMat);
+    rune.position.set(i * 1.2, groundY + 0.4, 0.5);
+    group.add(rune);
+  }
+
+  // Portal glow (purple/blue)
+  const portalLight = new THREE.PointLight(0x8040ff, 4, 25);
+  portalLight.position.set(0, groundY + 3, 0);
+  group.add(portalLight);
+
+  // Secondary warm light at base
+  const baseLight = new THREE.PointLight(0x6030c0, 1.5, 10);
+  baseLight.position.set(0, groundY + 0.5, 0);
+  group.add(baseLight);
+
+  // Glowing center plane (fake portal surface)
+  const portalGeo = new THREE.PlaneGeometry(3, 4);
+  const portalMat = new THREE.MeshBasicMaterial({
+    color: 0x6030c0,
+    transparent: true,
+    opacity: 0.25,
+    side: THREE.DoubleSide,
+  });
+  const portalPlane = new THREE.Mesh(portalGeo, portalMat);
+  portalPlane.position.set(0, groundY + 2.8, 0);
+  group.add(portalPlane);
+
+  group.position.set(x, 0, z);
+  return group;
+}

package/template/apps/client/src/renderer/dungeonZone.ts

@@ -0,0 +1,301 @@
+/**
+ * @file renderer/dungeonZone.ts
+ * Builds a Three.js Group from a raw GridData (zone terrain).
+ *
+ * Unlike buildDungeonMesh() which handles a full Dungeon with multiple rooms,
+ * this builder takes a single GridData and an (offsetX, offsetZ) world origin.
+ * Used by ChunkStreamer to render open-world terrain zones.
+ */
+
+import * as THREE from 'three';
+import type { GridData } from '@loonylabs/gamedev-core';
+
+const DEFAULT_FLOOR_COLOR = new THREE.Color(0x3a5a1a);
+
+function isFloorLike(cellType: string): boolean {
+  return (
+    cellType === 'floor' ||
+    cellType === 'spawn' ||
+    cellType === 'transition' ||
+    cellType === 'npc' ||
+    cellType === 'fire'
+  );
+}
+
+/**
+ * Builds a THREE.Group containing InstancedMeshes for floors and obstacles.
+ * @param groundColor - Optional CSS hex color string (e.g. '#3a5a1a') for the floor tiles.
+ */
+export function buildDungeonMeshFromGrid(
+  grid: GridData,
+  offsetX: number,
+  offsetZ: number,
+  groundColor?: string,
+): THREE.Group {
+  const group = new THREE.Group();
+  group.position.set(offsetX, 0, offsetZ);
+
+  const baseColor = groundColor ? new THREE.Color(groundColor) : DEFAULT_FLOOR_COLOR;
+
+  // 1. Count instances for pre-allocation
+  let floorCount = 0;
+  let solidWallCount = 0;
+  const obstacleCounts: Record<string, number> = { tree: 0, rock: 0, bush: 0, dead_tree: 0, bog_stone: 0 };
+  let fireCount = 0;
+
+  for (const row of grid.cells) {
+    for (const cell of row) {
+      if (isFloorLike(cell.type)) {
+        floorCount++;
+        if (cell.type === 'fire') fireCount++;
+      } else if (cell.type === 'wall' && cell.obstacleType) {
+        floorCount++;
+        if (obstacleCounts[cell.obstacleType] !== undefined) {
+          obstacleCounts[cell.obstacleType]++;
+        }
+      } else if (cell.type === 'wall' && !cell.obstacleType) {
+        solidWallCount++;
+      }
+    }
+  }
+
+  // 2. Render Floors with height-based color tinting
+  if (floorCount > 0) {
+    const geo = new THREE.BoxGeometry(1, 0.25, 1);
+    const mat = new THREE.MeshLambertMaterial({ color: baseColor, vertexColors: false });
+    const mesh = new THREE.InstancedMesh(geo, mat, floorCount);
+    mesh.receiveShadow = true;
+
+    const dummy = new THREE.Object3D();
+    const tintColor = new THREE.Color();
+    let idx = 0;
+    for (const row of grid.cells) {
+      for (const cell of row) {
+        const isObstacleFloor = cell.type === 'wall' && cell.obstacleType;
+        if (!isFloorLike(cell.type) && !isObstacleFloor) continue;
+        dummy.position.set(cell.x, cell.height + 0.125, cell.y);
+        dummy.updateMatrix();
+        mesh.setMatrixAt(idx, dummy.matrix);
+
+        // Height tinting: slight lightening at height 3+
+        const t = Math.min(cell.height / 4, 1);
+        tintColor.copy(baseColor).lerp(new THREE.Color(0xffffff), t * 0.15);
+        mesh.setColorAt(idx, tintColor);
+
+        idx++;
+      }
+    }
+    mesh.instanceMatrix.needsUpdate = true;
+    if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true;
+    group.add(mesh);
+  }
+
+  // 3. Render solid walls (e.g. basecamp room walls — W cells without obstacleType)
+  if (solidWallCount > 0) {
+    const wallGeo = new THREE.BoxGeometry(1, 1.5, 1);
+    const wallMat = new THREE.MeshLambertMaterial({ color: 0x8b7355 });
+    const wallMesh = new THREE.InstancedMesh(wallGeo, wallMat, solidWallCount);
+    wallMesh.castShadow = true;
+    wallMesh.receiveShadow = true;
+    const wallDummy = new THREE.Object3D();
+    let widx = 0;
+    for (const row of grid.cells) {
+      for (const cell of row) {
+        if (cell.type !== 'wall' || cell.obstacleType) continue;
+        wallDummy.position.set(cell.x, cell.height + 0.75, cell.y);
+        wallDummy.updateMatrix();
+        wallMesh.setMatrixAt(widx, wallDummy.matrix);
+        widx++;
+      }
+    }
+    wallMesh.instanceMatrix.needsUpdate = true;
+    group.add(wallMesh);
+  }
+
+  // 4. Render Obstacles
+  const dummy = new THREE.Object3D();
+
+  if (obstacleCounts.tree > 0) {
+    const geo = new THREE.CylinderGeometry(0.4, 0.4, 2, 8);
+    const mat = new THREE.MeshLambertMaterial({ color: 0x228b22 });
+    const mesh = new THREE.InstancedMesh(geo, mat, obstacleCounts.tree);
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    let idx = 0;
+    for (const row of grid.cells) {
+      for (const cell of row) {
+        if (cell.type === 'wall' && cell.obstacleType === 'tree') {
+          dummy.position.set(cell.x, cell.height + 1, cell.y);
+          dummy.updateMatrix();
+          mesh.setMatrixAt(idx, dummy.matrix);
+          idx++;
+        }
+      }
+    }
+    mesh.instanceMatrix.needsUpdate = true;
+    group.add(mesh);
+  }
+
+  if (obstacleCounts.rock > 0) {
+    const geo = new THREE.BoxGeometry(0.8, 0.8, 0.8);
+    const mat = new THREE.MeshLambertMaterial({ color: 0x808080 });
+    const mesh = new THREE.InstancedMesh(geo, mat, obstacleCounts.rock);
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    let idx = 0;
+    for (const row of grid.cells) {
+      for (const cell of row) {
+        if (cell.type === 'wall' && cell.obstacleType === 'rock') {
+          dummy.position.set(cell.x, cell.height + 0.4, cell.y);
+          dummy.rotation.set(0, 0, 0);
+          dummy.updateMatrix();
+          mesh.setMatrixAt(idx, dummy.matrix);
+          idx++;
+        }
+      }
+    }
+    mesh.instanceMatrix.needsUpdate = true;
+    group.add(mesh);
+  }
+
+  if (obstacleCounts.bush > 0) {
+    const geo = new THREE.SphereGeometry(0.5, 8, 8);
+    const mat = new THREE.MeshLambertMaterial({ color: 0x006400 });
+    const mesh = new THREE.InstancedMesh(geo, mat, obstacleCounts.bush);
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    let idx = 0;
+    for (const row of grid.cells) {
+      for (const cell of row) {
+        if (cell.type === 'wall' && cell.obstacleType === 'bush') {
+          dummy.position.set(cell.x, cell.height + 0.5, cell.y);
+          dummy.updateMatrix();
+          mesh.setMatrixAt(idx, dummy.matrix);
+          idx++;
+        }
+      }
+    }
+    mesh.instanceMatrix.needsUpdate = true;
+    group.add(mesh);
+  }
+
+  // Dead trees: bare grey cylinder trunk, no crown
+  if (obstacleCounts.dead_tree > 0) {
+    const geo = new THREE.CylinderGeometry(0.15, 0.2, 2.5, 6);
+    const mat = new THREE.MeshLambertMaterial({ color: 0x555555 });
+    const mesh = new THREE.InstancedMesh(geo, mat, obstacleCounts.dead_tree);
+    mesh.castShadow = true;
+    let idx = 0;
+    for (const row of grid.cells) {
+      for (const cell of row) {
+        if (cell.type === 'wall' && cell.obstacleType === 'dead_tree') {
+          dummy.position.set(cell.x, cell.height + 1.25, cell.y);
+          dummy.rotation.set(0, 0, 0);
+          dummy.updateMatrix();
+          mesh.setMatrixAt(idx, dummy.matrix);
+          idx++;
+        }
+      }
+    }
+    mesh.instanceMatrix.needsUpdate = true;
+    group.add(mesh);
+  }
+
+  // Bog stones: flat wide box, dark grey, partially sunken
+  if (obstacleCounts.bog_stone > 0) {
+    const geo = new THREE.BoxGeometry(1.2, 0.4, 1.0);
+    const mat = new THREE.MeshLambertMaterial({ color: 0x3a3a3a });
+    const mesh = new THREE.InstancedMesh(geo, mat, obstacleCounts.bog_stone);
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    let idx = 0;
+    for (const row of grid.cells) {
+      for (const cell of row) {
+        if (cell.type === 'wall' && cell.obstacleType === 'bog_stone') {
+          dummy.position.set(cell.x, cell.height + 0.18, cell.y);
+          dummy.rotation.set(0, 0, 0);
+          dummy.updateMatrix();
+          mesh.setMatrixAt(idx, dummy.matrix);
+          idx++;
+        }
+      }
+    }
+    mesh.instanceMatrix.needsUpdate = true;
+    group.add(mesh);
+  }
+
+  // 5. Campfire cells ('fire'): small cone flame + orange point light
+  for (const row of grid.cells) {
+    for (const cell of row) {
+      if (cell.type !== 'fire') continue;
+      const campfire = buildCampfireMesh();
+      campfire.position.set(cell.x, cell.height + 0.25, cell.y);
+      group.add(campfire);
+    }
+  }
+
+  // 6. Cave entrance arches: placed at clusters of transition cells
+  const transitionSet = new Set<string>();
+  for (const row of grid.cells) {
+    for (const cell of row) {
+      if (cell.type === 'transition') transitionSet.add(`${cell.x},${cell.y}`);
+    }
+  }
+  for (const row of grid.cells) {
+    for (const cell of row) {
+      if (cell.type !== 'transition') continue;
+      // Check if this is the top-left of a 3×2 block
+      const is3x2TopLeft =
+        transitionSet.has(`${cell.x + 1},${cell.y}`) &&
+        transitionSet.has(`${cell.x + 2},${cell.y}`) &&
+        transitionSet.has(`${cell.x},${cell.y + 1}`) &&
+        transitionSet.has(`${cell.x + 1},${cell.y + 1}`) &&
+        transitionSet.has(`${cell.x + 2},${cell.y + 1}`);
+      if (is3x2TopLeft) {
+        const arch = buildCaveEntranceArch();
+        arch.position.set(cell.x + 1, cell.height, cell.y);
+        group.add(arch);
+      }
+    }
+  }
+
+  return group;
+}
+
+/**
+ * Builds a campfire mesh: small orange cone + point light for warm glow.
+ */
+function buildCampfireMesh(): THREE.Group {
+  const group = new THREE.Group();
+
+  // Flame cone
+  const flameMat = new THREE.MeshBasicMaterial({ color: 0xff6600 });
+  const flame = new THREE.Mesh(new THREE.ConeGeometry(0.2, 0.6, 6), flameMat);
+  flame.position.y = 0.3;
+  group.add(flame);
+
+  // Warm point light
+  const light = new THREE.PointLight(0xff8833, 2, 8);
+  light.position.y = 0.5;
+  group.add(light);
+
+  return group;
+}
+
+/**
+ * Builds a dark stone arch mesh for the cave entrance.
+ * Two pillars + a lintel.
+ */
+function buildCaveEntranceArch(): THREE.Group {
+  const arch = new THREE.Group();
+  const mat = new THREE.MeshLambertMaterial({ color: 0x222222 });
+  const pillarGeo = new THREE.BoxGeometry(0.5, 3, 0.5);
+  const left = new THREE.Mesh(pillarGeo, mat);
+  const right = new THREE.Mesh(pillarGeo, mat);
+  const lintel = new THREE.Mesh(new THREE.BoxGeometry(3.5, 0.5, 0.5), mat);
+  left.position.set(-1.5, 1.5, 0);
+  right.position.set(1.5, 1.5, 0);
+  lintel.position.set(0, 3.25, 0);
+  arch.add(left, right, lintel);
+  return arch;
+}