Modular London terraces in three.js: sockets, assembly files and meshopt LODs

Sharing how our modular London terraces load in three.js, in case the pattern is useful for anyone building dense street scenes.

Each house is made of separate GLB parts: front wall, bay stack, sash windows, door, chimney, roof and so on. Parts carry named sockets on a shared metre grid, so they line up in code rather than in a modelling tool. A finished house is not a merged model but an assembly file: part ids, transforms, per-part materials and open/closed poses. A small loader turns that into a Group, which keeps a whole terrace editable: swap a door, change the brick colourway, or repeat the house along a street.

Every part ships as high, medium and low detail GLBs, metre scale, with EXT_meshopt_compression and quantisation, so you need GLTFLoader.setMeshoptDecoder(MeshoptDecoder). Uncompressed copies are included for tools that don’t read meshopt. Triangle counts per level are published for every part, so you can budget a scene before loading it.

There’s a worked example with tested code for repeating a house into a street:

Disclosure: these are our own packs, sold at assetsforthreejs.com. There is a free London Street Starter (a terrace house and a restaurant front, ready assembled, six props and a working example scene) if you want to look at the LOD and loading setup first-hand.

Happy to go into the socket and assembly format in more detail. It’s a fairly generic pattern for any modular kit.