# Sidewalk Tile

> A plain modular 4 × 4 m sidewalk and plaza paving tile at sidewalk height (paver top at 0.15 m), so it lines up flush with the sidewalks of the straight road, corner and junction tiles on any edge. Paved with 1 m concrete slabs, a running bond or a two-tone checkerboard, with an optional raised curb along the +Z edge to meet roads without sidewalks. Fill city blocks, squares and station forecourts.

![Sidewalk Tile preview](https://codels.download/m/sidewalk-tile.png)

Multi-view sheet (3/4, front, side, top): https://codels.download/m/sidewalk-tile.sheet.png

## Facts

- Category: Urban & Street › Roads & Tiles
- Size (W × H × D): 4.00 × 0.15 × 4.00 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 204 · Meshes: 17 · Materials: 3
- License: CC0-1.0 (Codels built-in)
- Tags: plaza, road-piece, sidewalk, street-tile, low-poly, stylized, modern, city, city-builder, modular, platform, terrain, concrete, flat, game-ready, instancing-friendly, mobile-friendly, parametric, color-gray, size-large, poly-ultra-low
- Page: https://codels.download/models/sidewalk-tile

## Files

| Format | URL |
|---|---|
| three.js ES module (`createSidewalkTile()`) | https://codels.download/m/sidewalk-tile.js |
| React Three Fiber component (`<SidewalkTile />`) | https://codels.download/m/sidewalk-tile.jsx |
| Instancing module (`createSidewalkTileInstances(count, place)`, one draw call per material) | https://codels.download/m/sidewalk-tile.instanced.js |
| Standalone HTML demo | https://codels.download/m/sidewalk-tile.html |
| glTF binary | https://codels.download/m/sidewalk-tile.glb |
| glTF binary, Meshopt-compressed (2–3× smaller; GLTFLoader needs `setMeshoptDecoder(MeshoptDecoder)`) | https://codels.download/m/sidewalk-tile.glb?compress=meshopt |
| glTF JSON | https://codels.download/m/sidewalk-tile.gltf |
| OBJ (vertex colors) + MTL | https://codels.download/m/sidewalk-tile.obj · https://codels.download/m/sidewalk-tile.mtl |
| STL | https://codels.download/m/sidewalk-tile.stl |
| CodelSpec JSON | https://codels.download/m/sidewalk-tile.json |

## Parameters

Append them as query parameters to any URL above to get a customized variant (e.g. `?pattern=...`).

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `pattern` | select | slabs \| running bond \| checker | slabs | slabs |
| `curb` | boolean | true \| false | false | false |
| `color` | color | #rrggbb | #92918b | #92918b |

## Parts

- sidewalkBase (box · base)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- paver (box · paverAlt)
- paver (box · paver)
- paver (box · paver)
- paver (box · paverAlt)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- paver (box · paverAlt)

## How to use

Save the code below as `sidewalk-tile.js`, then:

```js
import { createSidewalkTile } from './sidewalk-tile.js';
const model = createSidewalkTile();
scene.add(model);
```

## Code

```js
/**
 * Sidewalk Tile — Codels 3D model library (https://codels.download/models/sidewalk-tile)
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
 * Triangles: 204 · Size (W × H × D): 4.00 × 0.15 × 4.00 m
 *
 * Usage:
 *   import { createSidewalkTile } from './sidewalk-tile.js';
 *   
 *   const model = createSidewalkTile();
 *   model.position.set(0, 0, 0);
 *   scene.add(model);
 */
import * as THREE from 'three';

export function createSidewalkTile() {
  const root = new THREE.Group();
  root.name = 'SidewalkTile';

  // Materials
  const paverMat = new THREE.MeshStandardMaterial({ name: 'paver', color: 0x92918b, roughness: 0.95, flatShading: true });
  const baseMat = new THREE.MeshStandardMaterial({ name: 'base', color: 0x64635f, roughness: 1, flatShading: true });
  const paverAltMat = new THREE.MeshStandardMaterial({ name: 'paverAlt', color: 0x7f7e79, roughness: 0.95, flatShading: true });

  // Shared geometries
  const boxGeo = new THREE.BoxGeometry(0.988, 0.02, 0.988);

  // Parts
  const sidewalkBase = new THREE.Mesh(new THREE.BoxGeometry(4, 0.13, 4), baseMat);
  sidewalkBase.name = 'sidewalkBase';
  sidewalkBase.position.set(0, 0.065, 0);
  root.add(sidewalkBase);
  const paver = new THREE.Mesh(boxGeo, paverMat);
  paver.name = 'paver';
  paver.position.set(-1.5, 0.14, -1.5);
  root.add(paver);
  const paver2 = new THREE.Mesh(boxGeo, paverMat);
  paver2.name = 'paver';
  paver2.position.set(-1.5, 0.14, -0.5);
  root.add(paver2);
  const paver3 = new THREE.Mesh(boxGeo, paverMat);
  paver3.name = 'paver';
  paver3.position.set(-1.5, 0.14, 0.5);
  root.add(paver3);
  const paver4 = new THREE.Mesh(boxGeo, paverAltMat);
  paver4.name = 'paver';
  paver4.position.set(-1.5, 0.14, 1.5);
  root.add(paver4);
  const paver5 = new THREE.Mesh(boxGeo, paverMat);
  paver5.name = 'paver';
  paver5.position.set(-0.5, 0.14, -1.5);
  root.add(paver5);
  const paver6 = new THREE.Mesh(boxGeo, paverMat);
  paver6.name = 'paver';
  paver6.position.set(-0.5, 0.14, -0.5);
  root.add(paver6);
  const paver7 = new THREE.Mesh(boxGeo, paverAltMat);
  paver7.name = 'paver';
  paver7.position.set(-0.5, 0.14, 0.5);
  root.add(paver7);
  const paver8 = new THREE.Mesh(boxGeo, paverMat);
  paver8.name = 'paver';
  paver8.position.set(-0.5, 0.14, 1.5);
  root.add(paver8);
  const paver9 = new THREE.Mesh(boxGeo, paverMat);
  paver9.name = 'paver';
  paver9.position.set(0.5, 0.14, -1.5);
  root.add(paver9);
  const paver10 = new THREE.Mesh(boxGeo, paverMat);
  paver10.name = 'paver';
  paver10.position.set(0.5, 0.14, -0.5);
  root.add(paver10);
  const paver11 = new THREE.Mesh(boxGeo, paverMat);
  paver11.name = 'paver';
  paver11.position.set(0.5, 0.14, 0.5);
  root.add(paver11);
  const paver12 = new THREE.Mesh(boxGeo, paverMat);
  paver12.name = 'paver';
  paver12.position.set(0.5, 0.14, 1.5);
  root.add(paver12);
  const paver13 = new THREE.Mesh(boxGeo, paverMat);
  paver13.name = 'paver';
  paver13.position.set(1.5, 0.14, -1.5);
  root.add(paver13);
  const paver14 = new THREE.Mesh(boxGeo, paverMat);
  paver14.name = 'paver';
  paver14.position.set(1.5, 0.14, -0.5);
  root.add(paver14);
  const paver15 = new THREE.Mesh(boxGeo, paverMat);
  paver15.name = 'paver';
  paver15.position.set(1.5, 0.14, 0.5);
  root.add(paver15);
  const paver16 = new THREE.Mesh(boxGeo, paverAltMat);
  paver16.name = 'paver';
  paver16.position.set(1.5, 0.14, 1.5);
  root.add(paver16);

  root.traverse((o) => {
    if (o.isMesh) {
      o.castShadow = true;
      o.receiveShadow = true;
    }
  });
  return root;
}

export default createSidewalkTile;
```

---
Codels — 3D models as code for three.js. Search more: https://codels.download/api/v1/models?q=<query> · Guide: https://codels.download/llms.txt