[{"data":1,"prerenderedAt":110},["ShallowReactive",2],{"game-3d-city":3,"article-3d-city":42},{"slug":4,"title":5,"description":6,"category":7,"subcategory":8,"tags":9,"thumbnail":14,"thumbnailAlt":15,"iframeUrl":16,"iframeWidth":17,"iframeHeight":18,"embedType":19,"developer":20,"developerUrl":21,"releaseDate":22,"lastUpdated":22,"popular":23,"difficulty":24,"controls":25,"features":31,"relatedGames":38},"3d-city","3d.city","A Three.js 3D city builder where each zoned tile extrudes into a live skyline, powered by a micropolisJS simulation running in a Web Worker, with budget, overlays, and disasters.","Strategy","City Builder",[7,8,10,11,12,13],"Three.js","WebGL","Simulation","Open Source","\u002Fassets\u002Fimages\u002Fgames\u002F3d-city.svg","3d.city game thumbnail","https:\u002F\u002F3d.city","100%","600","iframe","lo-th","https:\u002F\u002Fgithub.com\u002Flo-th\u002F3d.city","2026-07-08",false,"Medium",{"keyboard":26,"mouse":29,"touch":30},[27,28],"WASD or Arrow keys — pan the camera","Z \u002F Q — pan on AZERTY layouts","Left-click places the selected tool; left-drag paints zone\u002Froad\u002Frail\u002Fwire strokes; right-drag (or the Drag View tool) orbits the camera; mouse wheel zooms","Supported — drag to pan, pinch to zoom, tap to place the active tool",[32,33,34,35,36,37],"Three.js rendering via WebGL2 or WebGPU with custom shaders and hand-built 3D models","micropolisJS city simulation (descended from the original SimCity) running in a Web Worker","Residential, commercial, and industrial zoning with drag-placeable strokes","Services and landmarks: police, fire, hospital, school, stadium, park, port, airport","Power economy with coal, nuclear, and turbine plants plus wire connections","Budget, Economy, Overlays, Ordinances, Eval, History, Awards, and Disaster panels (tornado, monster)",[39,40,41],"isocity","micropolisjs","forge-of-empires",{"id":43,"title":44,"body":45,"description":6,"extension":102,"faq":103,"lastReviewed":22,"meta":104,"navigation":105,"path":106,"seo":107,"slug":4,"stem":108,"__hash__":109},"games\u002Fgames\u002F3d-city.md","3d City",{"type":46,"value":47,"toc":95},"minimark",[48,53,57,61,88,92],[49,50,52],"h2",{"id":51},"overview","Overview",[54,55,56],"p",{},"The skyline rises one block at a time. In 3d.city, every tile you click extrudes almost instantly into a three-dimensional building, and a handful of green residential lots swells into a textured, lit metropolis while the camera is still settling. Created by lo-th and released under the MIT license, the project is as much a Three.js rendering showcase as it is a game: the world is drawn through WebGL2 or WebGPU with custom shaders, custom textures, and hand-built 3D models, while the underlying city simulation runs in a dedicated Web Worker so the frame rate holds steady as the map fills. That simulation is micropolisJS, itself descended from the original SimCity source code, which is why the familiar residential, commercial, and industrial loop drives every number underneath the visuals. The long-term vision, stated in the repo, is to grow this into a feature-rich builder, and the roadmap lists snow and night environments, richer disasters, and more buildings. The result appeals equally to players who want to paint a pretty city and to anyone curious how a full 3D engine can ship through a single browser tab with no download and no install.",[49,58,60],{"id":59},"how-to-play","How to Play",[54,62,63,64,68,69,72,73,76,77,80,81,76,84,87],{},"The objective is to grow a tax-positive city without running the treasury into the red. Pan the camera with ",[65,66,67],"em",{},"WASD"," or the ",[65,70,71],{},"Arrow keys"," (",[65,74,75],{},"Z"," and ",[65,78,79],{},"Q"," stand in for ",[65,82,83],{},"W",[65,85,86],{},"A"," on AZERTY keyboards), orbit by dragging with the right mouse button or by selecting the Drag View tool, and zoom with the mouse wheel. From the bottom toolbar you pick a tool — residential, commercial, or industrial zones, roads, rail, power wires, police and fire stations, hospitals, schools, parks, or power plants such as coal, nuclear, and turbine — then left-click the map to place it. The zone, road, rail, and wire tools drag across multiple tiles in one stroke; select the bulldozer and click a tile to clear it. Touch input is supported for panning, pinch-zoom, and tapping to place the active tool.",[49,89,91],{"id":90},"tips-strategy","Tips & Strategy",[54,93,94],{},"Lay roads before you zone, because growth follows transport: a residential block with no road access stays empty and earns nothing. Start compact — a small triangle of residential, commercial, and industrial zones linked by a short road, with power lines (or an adjacent powered building) connecting each zone to a plant before you expect anything to develop. Watch the Budget and Economy panels closely, because early tax revenue is thin and a single unnecessary coal plant can bleed you dry before the first citizens arrive. Open the Overlays panel to read land value, traffic, and pollution before you expand; industrial zones pollute, so keep them downwind and downstream of residential. When a block stalls, switch to the Query tool and click the tile to inspect exactly what that cell is missing. Disasters such as the tornado can wipe a district in seconds, so save periodically through the Save panel rather than risking hours of zoning to a single random strike.",{"title":96,"searchDepth":97,"depth":97,"links":98},"",2,[99,100,101],{"id":51,"depth":97,"text":52},{"id":59,"depth":97,"text":60},{"id":90,"depth":97,"text":91},"md",null,{},true,"\u002Fgames\u002F3d-city",{"description":6},"games\u002F3d-city","bmOHvbAbl-4BP2JVcDDmkT-Q9YUWDcVv_MK6JdxK77s",1783575110442]