CityScape

A SimCity-inspired city builder built with Three.js and bundled with Vite.
The project renders a 3D grid-based city, lets you place buildings via a toolbar UI, and advances a lightweight simulation loop (population/time/other city stats).

Tech Stack

• Three.js (3D rendering)
• Vite (dev server + build)
• Vanilla JavaScript / HTML / CSS

Project Structure

.
├─ package.json
├─ vite.config.js
└─ src/
   ├─ index.html
   ├─ public/
   │  ├─ main.css
   │  ├─ icons/
   │  ├─ textures/
   │  └─ models/
   └─ scripts/
      ├─ game.js
      ├─ ui.js
      ├─ camera.js
      ├─ input.js
      ├─ config.js
      ├─ assets/
      └─ sim/

Getting Started (Local)

Prerequisites

• Node.js 18+ recommended

Install

npm install

Run dev server

npm run dev

By default, Vite is configured to run at:

• http://127.0.0.1:3000

Build for production

npm run build

Preview production build

npm run preview

How the App Works (High-level)

• src/index.html loads:
  • ./scripts/game.js (Three.js scene + simulation loop)
  • ./scripts/ui.js (toolbar, overlays, info panel)
• Game sets up:
  • Three.js renderer + scene
  • camera + input managers
  • a City simulation object (grid size currently initialized as 25)
• A simulation tick runs on an interval (currently once per second) and updates the title bar + info panel.

Controls

Based on the in-game UI hints:

• Interact: Left mouse
• Rotate: Right mouse
• Pan: Ctrl + Right mouse
• Zoom: Mouse wheel / scroll

Tools / Buildings

The toolbar exposes multiple tools (select, bulldoze, and several placement options).
Placement is driven by the currently selected tool id in the UI and applied in the game loop while the left mouse button is held.

Deployment (GitHub Pages)

vite.config.js includes a base path intended for GitHub Pages deployments.
If you fork/rename the repository, update the base value accordingly.

Example:

base: '/<your-repo-name>/'

Notes / Known Gaps

• There are redundant function definitions for budget management and UI updates across ui.js and game.js.
• Some UI code may need cleanup (e.g., duplicate updateBudgetDisplay definitions and budget variable usage), but this README documents the repository as-is.
• The public/ directory and index.html are currently nested inside src/, which deviates from standard Vite architecture. This setup may cause broken asset paths (textures/models) during the production build and should be refactored to the project root for better reliability.