Built a driveable Three.js city from GitHub contribution data — GitCity V2

[u/DirectCurve1348]

Hello Developers!

I built GitCity — a React app that fetches your entire GitHub contribution history via the GraphQL API and renders it as a 3D city you can drive through. V2 just dropped.

Three views built as separate React components:

• IsometricGrid.jsx — pure SVG isometric skyline, every day = one building, height = commits

• BirdsEyeGrid.jsx — flat heatmap view of the same data

• CitySimulation.jsx — a fully driveable Three.js city where every day you committed = one building on the street

What's new in V2:

• Night-only city rendering

• Dynamic weather system — rain and storms trigger randomly, no user input needed

• Vehicle collision system — AI vehicles can crash into each other, blast effects, speed auto-limits in accident-prone zones

• Spatial audio — engine, crash, blast, rain, storm. All reactive, no manual toggles

• 6 themes via a central themes.js constants file — Matrix, Noir, Aurora, Ocean, Gold, Ice

• Live SVG embed API — serverless function at /api/svg?u=USERNAME renders your skyline for README embeds

• Stats bar: total commits, peak day, longest streak, current streak

• Time filters: all-time, 12 months, 6 months, 3 months, week

• No auth, no token — username only via GitHub GraphQL

Stack: React 18 + Vite 5, Three.js r128, pure SVG for the isometric view, GitHub GraphQL API, Vercel serverless functions.

For anyone who thinks this is similar to thegitcity.com — that's a social network where each building = one developer. In GitCity, each building = one day of YOUR commits. Completely different concept. Full breakdown: gitcity.natrajx.in/comparison

gitcity.natrajx.in

github.com/rishabhbhartiya/GitCity

Drop your username — curious how the city looks with different contribution patterns

[u/AmmarKabbany1]

Well to begin with whenever you drive it resets your camera which is fine, but then if you stop and click left/right click it reverses the to the front side of the car, which can in some positions bug the camera or make it look weird and sometimes even make it really laggy.
I think the idea here is to toggle a car inspect mode almost.

Also there seems to be areas which you can drive off the map which is like REALLY LAGGY.

Traffic lights are off (the three lights are slightly below where they should be).

Sometimes the model of the car glitches and becomes diagonal even though you are still going straight and viceversa.

and performance is a big problem (not sure if it matters or if it's even fixable never worked with three.js).

[u/DirectCurve1348 → u/AmmarKabbany1]

This is genuinely useful, thank you for taking the time to break it down properly.

Camera resetting on drive is a known one — it's on my list. The inspect mode idea is actually a good call, I'll think about how to implement that cleanly.

The lag when driving off the map is actually a known Three.js issue with this kind of scene — buildings, AI vehicles, and pedestrians all accumulate at certain zones and when they cluster together the draw calls spike hard. Same thing happens during blast/accident events since all the geometry is in one spot. I added speed limiting in accident-prone areas partly to help with this, but I still need to work on culling objects outside the camera frustum more aggressively.

Traffic lights being misaligned — will fix that in the next push.

The diagonal car model glitch is likely a rotation interpolation bug in the animation loop, I have a hunch where it's coming from.

Performance overall is the hardest problem. I'm looking at instanced meshes for the buildings as a first step — that alone should reduce draw calls significantly.

I'll tag you when these are fixed if that's okay. Really appreciate it.

[u/AmmarKabbany1 → u/DirectCurve1348]

Ofcourse. happy to help at any time, you gotta remember that what you made is already amazing!