Build a London terrace in three.js

This guide builds a row of Victorian London terraced houses from the London terraced houses pack: one assembly file per house, repeated along the street. The code below is the code we ran to make the picture.

What a house is made of

The pack's Two-storey bay-fronted terrace assembly places 38 parts to make one house, using 19 different component models. The ones that set the house's shape:

• Ground-floor front wall with bay opening (right hand) at street level and an upper-floor front wall, two windows above it: each 5 m wide and 3 m tall, so storeys stack every 3 m.
• Party / side walls at x = ±2.39 m, a floor plate per storey, and the rear walls 7.2 m back, turned to face the garden.
• The london terrace roof sits at 6 m, with the terrace chimney stack on its chimney socket.
• Windows and doors (sash, bay, door) are separate models placed in the wall openings, so a facade can be changed without touching the walls.

The code

Unzip the pack next to your script. assemblies.js ships in the zip: it reads an assembly file, loads each GLB once and clones it into place.

// Tutorial example: a row of London terraced houses from the pack's assembly file.
// Assumes the pack is unzipped next to this file (models/, assemblies/, assemblies.js).
import * as THREE from 'three';
import { loadAssembly } from './assemblies.js';

export async function terraceRow(houses = 4, level = 'medium') {
  const row = new THREE.Group();
  for (let i = 0; i < houses; i++) {
    // One assembly = one house: 38 placed parts. The loader loads each GLB once
    // and clones it, so extra houses cost draw calls, not downloads.
    const house = await loadAssembly('assemblies/london-residential-benchmark.json', { level });
    house.position.x = i * 5;            // the kit's house pitch is 5 m (party walls at ±2.39 m)
    row.add(house);
  }
  return row;
}

Add the row to your scene with scene.add(await terraceRow(4)). Four houses at medium detail came to 368 meshes in our test; how fast that draws depends on your whole scene and device, so measure it in yours.

Choosing a detail level

Every part has high, medium and low files, and loadAssembly takes the level as an option. Houses in the distance can use 'low', where a wall becomes one slab with flat window panels; the part pages list each level's triangle count so you can budget a street before loading it.

Going further

• Open the assembly JSON: it is plain part ids and transforms, so you can write your own house types, for example swap the bay front for a flat front (ground-floor front wall, flat front (right hand)).
• The pack's other assemblies show a raised basement with lightwell, stacked bays, a three-storey house and colourways in soot-blackened brick, yellow stock and painted stucco.
• For shops at street level, the London shopfronts and London pubs packs reuse these walls for their upper floors.

See the London terraced houses pack