Plymouth 3D
What it is
The city I live in, rebuilt in low-poly 3D so you can walk round it in a browser. It covers the city centre, the Hoe, the Barbican and the waterfront out to Royal William Yard, and you pick the time of day and the weather. It’s numbered 0.21 because it’s nowhere near finished.
Why I built it
I’d watched someone build a fantasy world in three.js and wanted one of my own, except real.
The first version took in about thirty square kilometres, from the Tamar Bridge to the Laira. It had too many problems once you looked closely, so I made a copy covering just the centre, got that right, and I’ve been growing it back outwards since.
How it works
Streets and building outlines come from OpenStreetMap. Heights come from the Environment Agency’s LIDAR, a laser survey flown over the city: the top surface minus the bare ground gives every building its height and the shape of its roof. Facade colours are sampled from Mapillary street photos, and the landmarks are modelled by hand from photos.
The awkward part was houses nobody has mapped. Whole streets are missing from the map in places, so the build looks for them in the laser data instead. For a while trees kept turning into buildings. The fix was the survey’s last returns. On a roof the first and last returns land in the same place, but in a tree the laser gets down through the leaves and they end up metres apart.
The city is baked into squares that load as you move, so a phone only fetches what’s near you. None of the sound is recorded. Wind, gulls, rain, trains and the ten bells of St Andrew’s on a Tuesday practice night are all generated in the browser. Trees turn in autumn and go bare in winter, the harbours drain at low tide, and on Bonfire Night the fireworks go up from the Citadel.
What I’d change
The tides come from a rough model of Plymouth’s rather than the published tables, so they won’t match the real thing to the minute. Real tide times are on the list.
How to use it
On a computer, W A S D walks, Shift runs, Space jumps and F flies (E up, Q down). Drag or click to look, M turns the sound on and off, and Esc opens the menu, where you can change the time, the weather, the season and where you start.
On a phone, put your left thumb down anywhere and it becomes a joystick. Drag on the right side to look around. The buttons in the bottom right cover running, jumping and flying.
JavaScriptthree.jsWeb Audio APINode.jsOpenStreetMapEnvironment Agency LIDAR