set up frontend (vite+three.js) and 3d code

2025-11-25 23:51:37 -06:00
parent 30d3aa69c7
commit b02fe71d06
5 changed files with 1130 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>3D City Sim</title>
+  <style>
+    body {
+      margin: 0;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "gp",
+  "version": "1.0.0",
+  "description": "Map Madison interactively in 3D, and simulate building transit lines.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "three": "^0.181.2",
+    "vite": "^7.2.4"
+  }
+}
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,77 @@
+import * as THREE from 'three';
+import { MapControls } from 'three/addons/controls/MapControls.js';
+
+// 1. Setup Scene
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xcccccc);
+scene.fog = new THREE.FogExp2(0xcccccc, 0.002);
+
+const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
+camera.position.set(200, 200, 200);
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+// 2. Lights
+const dirLight = new THREE.DirectionalLight(0xffffff, 3);
+dirLight.position.set(100, 300, 100);
+scene.add(dirLight);
+scene.add(new THREE.AmbientLight(0x404040));
+
+// 3. Helpers (Ground)
+const plane = new THREE.Mesh(
+  new THREE.PlaneGeometry(2000, 2000),
+  new THREE.MeshBasicMaterial({ color: 0x999999 })
+);
+plane.rotation.x = -Math.PI / 2;
+scene.add(plane);
+
+// 4. Load Data & Create Buildings
+fetch('./city_data.json')
+  .then(res => res.json())
+  .then(buildings => {
+    createCity(buildings);
+  })
+  .catch(e => console.error("Data load failed", e));
+
+function createCity(data) {
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
+  // Move pivot to bottom of box so scaling works comfortably
+  geometry.translate(0, 0.5, 0);
+
+  const material = new THREE.MeshLambertMaterial({ color: 0x44aa88 });
+  const mesh = new THREE.InstancedMesh(geometry, material, data.length);
+
+  const dummy = new THREE.Object3D();
+
+  data.forEach((b, i) => {
+    const [x, z, w, d, h] = b;
+
+    dummy.position.set(x, 0, z);
+    dummy.scale.set(w, h, d);
+    dummy.updateMatrix();
+
+    mesh.setMatrixAt(i, dummy.matrix);
+  });
+
+  scene.add(mesh);
+}
+
+// 5. Controls & Animation
+const controls = new MapControls(camera, renderer.domElement);
+controls.enableDamping = true;
+
+function animate() {
+  requestAnimationFrame(animate);
+  controls.update();
+  renderer.render(scene, camera);
+}
+
+window.addEventListener('resize', () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+animate();
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: '/city-sim/',
+  build: {
+    outDir: 'dist'
+  }
+})