evan/transit-sim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Evan Scamehorn
2025-11-25 23:51:37 -06:00
parent 30d3aa69c7
commit b02fe71d06
5 changed files with 1130 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html Normal file
View File

@@ -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>

1008
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
package.json Normal file
View File

@@ -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"
}
}

77
src/main.js Normal file
View File

@@ -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();

8
vite.config.js Normal file
View File

@@ -0,0 +1,8 @@
import { defineConfig } from 'vite'
export default defineConfig({
base: '/city-sim/',
build: {
outDir: 'dist'
}
})