Model · London shopfronts
Shop awning, plain
A plain shop awning about 4.60 m wide, 0.52 m tall and 1.38 m deep, in one GLB. It has two named material slots, awning fabric and shop aluminium, and no textures, only PBR colour slots on UV-mapped geometry, so changing its colour means editing the fabric slot.
The London shopfronts pack uses it in the Shopping parade assembly. Its striped counterpart appears in the corner cafe, so the two let you vary a row of shops. It pairs with the fascias, frames and pavement A-board from the same pack.
Triangle counts are 300 at high, 252 at medium and 228 at low, which means the levels differ only slightly and the awning is cheap at any distance. It is safe to instance with InstancedMesh, which suits repeating it along a street.
A component from the London shopfronts pack, with named material slots for awning fabric and shop aluminium. It measures about 4.60 m × 0.52 m × 1.38 m (W × H × D) and comes as high, medium and low detail files. Place it on its own, or load one of the 2 included assemblies that use it.
The picture is a studio render. View in 3D loads the GLB files themselves in three.js; switch between high, medium and low to compare.
Included in London shopfronts (£19), which contains 34 component models and 4 assemblies.
See the pack| High detail | 300 triangles · 9 KB |
|---|---|
| Medium detail | 252 triangles · 8 KB |
| Low detail | 228 triangles · 8 KB |
| Size (W × H × D) | 4.60 m × 0.52 m × 1.38 m |
| Format | GLB (glTF 2.0 binary) |
| Compression | Meshopt (EXT_meshopt_compression) + quantised; uncompressed copy in the pack |
| Textures | None: PBR colours only, UV-mapped for your own |
| Material slots | awning fabric, shop aluminium |
| Sockets | mount-origin |
| Era | victorian, contemporary |
| On mobile | Start with the low level (228 triangles). What a phone can draw depends on your whole scene; no device benchmark is published yet. |
| Instancing | Safe to instance (InstancedMesh) |
Load it in three.js
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 { scene: model } = await loader.loadAsync('models/london-shopfronts-awning-plain/high-london-shopfronts-awning-plain.glb');
scene.add(model); // 1 unit = 1 metre, origin at the mount socket
