# Crosswalk

> A modular 4 × 4 m straight road tile running along Z (connects the +Z and −Z edges) with a 1 m pedestrian crossing painted across it: bold zebra stripes, a ladder or two transverse lines, optional stop lines for both directions and yellow tactile pads on the sidewalks. Same profile and 2 m dash rhythm as the straight road, so it drops into any street for city builders and driving games.

![Crosswalk preview](https://codels.download/m/crosswalk.png)

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

## Facts

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

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `lanes` | int | 1 – 2 | 2 | 2 |
| `sidewalk` | boolean | true \| false | true | true |
| `style` | select | zebra \| ladder \| lines | zebra | zebra |
| `stopLines` | boolean | true \| false | true | true |
| `asphalt` | color | #rrggbb | #41454b | #41454b |

## Parts

- asphalt (box · asphalt)
- zebraStripe (box · white)
- zebraStripe (box · white)
- zebraStripe (box · white)
- zebraStripe (box · white)
- zebraStripe (box · white)
- zebraStripe (box · white)
- zebraStripe (box · white)
- zebraStripe (box · white)
- zebraStripe (box · white)
- edgeLine (box · white)
- edgeLine (box · white)
- edgeLine (box · white)
- edgeLine (box · white)
- stopLine (box · white)
- stopLine (box · white)
- centerDash (box · yellow)
- centerDash (box · yellow)
- curb (box · curb)
- sidewalkBase (box · base)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- tactilePad (box · yellow)
- curb (box · curb)
- sidewalkBase (box · base)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- paver (box · paver)
- tactilePad (box · yellow)
- drainGrate (box · grate)
- grateBar (box · base)
- grateBar (box · base)
- grateBar (box · base)
- grateBar (box · base)
- grateBar (box · base)

## How to use

Save the code below as `crosswalk.js`, then:

```js
import { createCrosswalk } from './crosswalk.js';
const model = createCrosswalk();
scene.add(model);
```

## Code

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

export function createCrosswalk() {
  const root = new THREE.Group();
  root.name = 'Crosswalk';

  // Materials
  const asphaltMat = new THREE.MeshStandardMaterial({ name: 'asphalt', color: 0x41454b, roughness: 0.95, flatShading: true });
  const whiteMat = new THREE.MeshStandardMaterial({ name: 'white', color: 0xecebe4, roughness: 0.7, flatShading: true });
  const yellowMat = new THREE.MeshStandardMaterial({ name: 'yellow', color: 0xe9b72c, roughness: 0.7, flatShading: true });
  const curbMat = new THREE.MeshStandardMaterial({ name: 'curb', color: 0xb4b2ab, roughness: 0.9, flatShading: true });
  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 grateMat = new THREE.MeshStandardMaterial({ name: 'grate', color: 0x26292c, roughness: 0.6, metalness: 0.5, flatShading: true });

  // Shared geometries
  const boxGeo = new THREE.BoxGeometry(0.16, 0.006, 1);
  const boxGeo2 = new THREE.BoxGeometry(0.1, 0.006, 1.38);
  const boxGeo3 = new THREE.BoxGeometry(0.895, 0.006, 0.08);
  const boxGeo4 = new THREE.BoxGeometry(0.11, 0.006, 0.75);
  const boxGeo5 = new THREE.BoxGeometry(0.14, 0.165, 4);
  const boxGeo6 = new THREE.BoxGeometry(0.51, 0.13, 4);
  const boxGeo7 = new THREE.BoxGeometry(0.498, 0.02, 0.988);
  const boxGeo8 = new THREE.BoxGeometry(0.35, 0.008, 0.8);
  const boxGeo9 = new THREE.BoxGeometry(0.24, 0.006, 0.035);

  // Parts
  const asphalt = new THREE.Mesh(new THREE.BoxGeometry(2.7, 0.02, 4), asphaltMat);
  asphalt.name = 'asphalt';
  asphalt.position.set(0, 0.01, 0);
  root.add(asphalt);
  const zebraStripe = new THREE.Mesh(boxGeo, whiteMat);
  zebraStripe.name = 'zebraStripe';
  zebraStripe.position.set(-1.2, 0.022, 0);
  root.add(zebraStripe);
  const zebraStripe2 = new THREE.Mesh(boxGeo, whiteMat);
  zebraStripe2.name = 'zebraStripe';
  zebraStripe2.position.set(-0.9, 0.022, 0);
  root.add(zebraStripe2);
  const zebraStripe3 = new THREE.Mesh(boxGeo, whiteMat);
  zebraStripe3.name = 'zebraStripe';
  zebraStripe3.position.set(-0.6, 0.022, 0);
  root.add(zebraStripe3);
  const zebraStripe4 = new THREE.Mesh(boxGeo, whiteMat);
  zebraStripe4.name = 'zebraStripe';
  zebraStripe4.position.set(-0.3, 0.022, 0);
  root.add(zebraStripe4);
  const zebraStripe5 = new THREE.Mesh(boxGeo, whiteMat);
  zebraStripe5.name = 'zebraStripe';
  zebraStripe5.position.set(0, 0.022, 0);
  root.add(zebraStripe5);
  const zebraStripe6 = new THREE.Mesh(boxGeo, whiteMat);
  zebraStripe6.name = 'zebraStripe';
  zebraStripe6.position.set(0.3, 0.022, 0);
  root.add(zebraStripe6);
  const zebraStripe7 = new THREE.Mesh(boxGeo, whiteMat);
  zebraStripe7.name = 'zebraStripe';
  zebraStripe7.position.set(0.6, 0.022, 0);
  root.add(zebraStripe7);
  const zebraStripe8 = new THREE.Mesh(boxGeo, whiteMat);
  zebraStripe8.name = 'zebraStripe';
  zebraStripe8.position.set(0.9, 0.022, 0);
  root.add(zebraStripe8);
  const zebraStripe9 = new THREE.Mesh(boxGeo, whiteMat);
  zebraStripe9.name = 'zebraStripe';
  zebraStripe9.position.set(1.2, 0.022, 0);
  root.add(zebraStripe9);
  const edgeLine = new THREE.Mesh(boxGeo2, whiteMat);
  edgeLine.name = 'edgeLine';
  edgeLine.position.set(-0.93, 0.022, -1.31);
  root.add(edgeLine);
  const edgeLine2 = new THREE.Mesh(boxGeo2, whiteMat);
  edgeLine2.name = 'edgeLine';
  edgeLine2.position.set(-0.93, 0.022, 1.31);
  root.add(edgeLine2);
  const edgeLine3 = new THREE.Mesh(boxGeo2, whiteMat);
  edgeLine3.name = 'edgeLine';
  edgeLine3.position.set(0.93, 0.022, -1.31);
  root.add(edgeLine3);
  const edgeLine4 = new THREE.Mesh(boxGeo2, whiteMat);
  edgeLine4.name = 'edgeLine';
  edgeLine4.position.set(0.93, 0.022, 1.31);
  root.add(edgeLine4);
  const stopLine = new THREE.Mesh(boxGeo3, whiteMat);
  stopLine.name = 'stopLine';
  stopLine.position.set(-0.5325, 0.022, -0.79);
  root.add(stopLine);
  const stopLine2 = new THREE.Mesh(boxGeo3, whiteMat);
  stopLine2.name = 'stopLine';
  stopLine2.position.set(0.5325, 0.022, 0.79);
  root.add(stopLine2);
  const centerDash = new THREE.Mesh(boxGeo4, yellowMat);
  centerDash.name = 'centerDash';
  centerDash.position.set(0, 0.022, -1.125);
  root.add(centerDash);
  const centerDash2 = new THREE.Mesh(boxGeo4, yellowMat);
  centerDash2.name = 'centerDash';
  centerDash2.position.set(0, 0.022, 1.125);
  root.add(centerDash2);
  const curb = new THREE.Mesh(boxGeo5, curbMat);
  curb.name = 'curb';
  curb.position.set(-1.42, 0.0825, 0);
  root.add(curb);
  const sidewalkBase = new THREE.Mesh(boxGeo6, baseMat);
  sidewalkBase.name = 'sidewalkBase';
  sidewalkBase.position.set(-1.745, 0.065, 0);
  root.add(sidewalkBase);
  const paver = new THREE.Mesh(boxGeo7, paverMat);
  paver.name = 'paver';
  paver.position.set(-1.745, 0.14, -1.5);
  root.add(paver);
  const paver2 = new THREE.Mesh(boxGeo7, paverMat);
  paver2.name = 'paver';
  paver2.position.set(-1.745, 0.14, -0.5);
  root.add(paver2);
  const paver3 = new THREE.Mesh(boxGeo7, paverMat);
  paver3.name = 'paver';
  paver3.position.set(-1.745, 0.14, 0.5);
  root.add(paver3);
  const paver4 = new THREE.Mesh(boxGeo7, paverMat);
  paver4.name = 'paver';
  paver4.position.set(-1.745, 0.14, 1.5);
  root.add(paver4);
  const tactilePad = new THREE.Mesh(boxGeo8, yellowMat);
  tactilePad.name = 'tactilePad';
  tactilePad.position.set(-1.74, 0.152, 0);
  root.add(tactilePad);
  const curb2 = new THREE.Mesh(boxGeo5, curbMat);
  curb2.name = 'curb';
  curb2.position.set(1.42, 0.0825, 0);
  root.add(curb2);
  const sidewalkBase2 = new THREE.Mesh(boxGeo6, baseMat);
  sidewalkBase2.name = 'sidewalkBase';
  sidewalkBase2.position.set(1.745, 0.065, 0);
  root.add(sidewalkBase2);
  const paver5 = new THREE.Mesh(boxGeo7, paverMat);
  paver5.name = 'paver';
  paver5.position.set(1.745, 0.14, -1.5);
  root.add(paver5);
  const paver6 = new THREE.Mesh(boxGeo7, paverMat);
  paver6.name = 'paver';
  paver6.position.set(1.745, 0.14, -0.5);
  root.add(paver6);
  const paver7 = new THREE.Mesh(boxGeo7, paverMat);
  paver7.name = 'paver';
  paver7.position.set(1.745, 0.14, 0.5);
  root.add(paver7);
  const paver8 = new THREE.Mesh(boxGeo7, paverMat);
  paver8.name = 'paver';
  paver8.position.set(1.745, 0.14, 1.5);
  root.add(paver8);
  const tactilePad2 = new THREE.Mesh(boxGeo8, yellowMat);
  tactilePad2.name = 'tactilePad';
  tactilePad2.position.set(1.74, 0.152, 0);
  root.add(tactilePad2);
  const drainGrate = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.012, 0.6), grateMat);
  drainGrate.name = 'drainGrate';
  drainGrate.position.set(1.17, 0.022, 1.35);
  root.add(drainGrate);
  const grateBar = new THREE.Mesh(boxGeo9, baseMat);
  grateBar.name = 'grateBar';
  grateBar.position.set(1.17, 0.028, 1.13);
  root.add(grateBar);
  const grateBar2 = new THREE.Mesh(boxGeo9, baseMat);
  grateBar2.name = 'grateBar';
  grateBar2.position.set(1.17, 0.028, 1.24);
  root.add(grateBar2);
  const grateBar3 = new THREE.Mesh(boxGeo9, baseMat);
  grateBar3.name = 'grateBar';
  grateBar3.position.set(1.17, 0.028, 1.35);
  root.add(grateBar3);
  const grateBar4 = new THREE.Mesh(boxGeo9, baseMat);
  grateBar4.name = 'grateBar';
  grateBar4.position.set(1.17, 0.028, 1.46);
  root.add(grateBar4);
  const grateBar5 = new THREE.Mesh(boxGeo9, baseMat);
  grateBar5.name = 'grateBar';
  grateBar5.position.set(1.17, 0.028, 1.57);
  root.add(grateBar5);

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

export default createCrosswalk;
```

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