How the models work

The models were built for our own three.js scenes first, so they follow the rules a web scene needs: small files, predictable scale, and pieces that fit together in code.

GLB, three levels of detail

Every model is a glTF 2.0 binary (.glb) in three levels, named for the level and the model: high-london-residential-sash.glb, medium-london-residential-sash.glb and low-london-residential-sash.glb, in a folder per model. Swap between them with a THREE.LOD, or pick one per device.

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';

const loader = new GLTFLoader().setMeshoptDecoder(MeshoptDecoder);
const lod = new THREE.LOD();
for (const [level, distance] of [['high', 0], ['medium', 25], ['low', 60]]) {
  const { scene } = await loader.loadAsync(`models/london-residential-sash/${level}-london-residential-sash.glb`);
  lod.addLevel(scene, distance);
}
scene.add(lod);

Real scale

One unit is one metre. A London sash window is about 1.4 m wide; a terrace house front is about 4.8 m. Each model's origin is its mount point, so modules line up without offsets.

Sockets and a shared frame

Modules in a kit share a frame (storey heights, wall thickness, bay widths) and named sockets, so they can be snapped together by code rather than nudged by eye.

Assemblies

The complete houses, cranes and machines in the previews are assembly files: part ids plus transforms. Load one with the included loader, or read it to build your own variations.

Compression

The GLBs are compressed with meshopt (EXT_meshopt_compression) and quantised (KHR_mesh_quantization), which keeps most models in the tens of kilobytes. In three.js, give the loader the decoder that ships with three: new GLTFLoader().setMeshoptDecoder(MeshoptDecoder). Each pack also includes uncompressed copies for tools that do not read meshopt.

Materials and textures

Each model uses named material slots (for example surface-london-stock, trim-painted-timber, surface-slate), so you can re-skin a whole street by replacing materials by name. Most models embed their textures in the GLB; the rest use PBR colours and are UV-mapped for your own. Every model page says which.

Questions