# Jersey Barrier

> A precast concrete New Jersey highway barrier segment, 2 m long by default, with the classic sloped safety profile (0.61 m base, 0.81 m tall), drainage slots at the foot, steel connection loops at both ends and optional red-and-white reflector stripes plus amber cat-eyes. Line them up end to end for highway medians, road works, checkpoints and racing tracks.

![Jersey Barrier preview](https://codels.download/m/jersey-barrier.png)

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

## Facts

- Category: Urban & Street › Traffic
- Size (W × H × D): 2.17 × 0.83 × 0.62 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 364 · Meshes: 25 · Materials: 6
- License: CC0-1.0 (Codels built-in)
- Tags: barricade, jersey-barrier, low-poly, stylized, construction, military, modern, city, road, city-builder, racing-game, shooter, modular, obstacle, prop, concrete, game-ready, instancing-friendly, mobile-friendly, parametric, color-gray, size-medium, poly-low
- Page: https://codels.download/models/jersey-barrier

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `length` | number | 1 – 4 | 2 | 2 |
| `stripes` | boolean | true \| false | true | true |
| `color` | color | #rrggbb | #b8b4aa | #b8b4aa |

## Parts

- barrier (extrude · concrete)
- slot (box · dark)
- slot (box · dark)
- loop (torus · steel)
- loop (torus · steel)
- loop (torus · steel)
- loop (torus · steel)
- reflectorTape (plane · white)
- reflectorTape (plane · red)
- reflectorTape (plane · white)
- reflectorTape (plane · red)
- reflectorTape (plane · white)
- reflectorTape (plane · red)
- reflectorTape (plane · white)
- reflectorTape (plane · red)
- reflectorTape (plane · white)
- reflectorTape (plane · red)
- reflectorTape (plane · white)
- reflectorTape (plane · red)
- reflectorTape (plane · white)
- reflectorTape (plane · red)
- reflectorTape (plane · white)
- reflectorTape (plane · red)
- catEye (box · amber)
- catEye (box · amber)

## How to use

Save the code below as `jersey-barrier.js`, then:

```js
import { createJerseyBarrier } from './jersey-barrier.js';
const model = createJerseyBarrier();
scene.add(model);
```

## Code

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

const deg = THREE.MathUtils.degToRad;

// Extrude a 2D outline along Z (centered). bevel = [thickness, size, segments].
function extrude(outline, depth, holes = [], bevel = null) {
  const shape = new THREE.Shape(outline.map(([x, y]) => new THREE.Vector2(x, y)));
  for (const hole of holes) shape.holes.push(new THREE.Path(hole.map(([x, y]) => new THREE.Vector2(x, y))));
  const options = bevel
    ? { depth, bevelEnabled: true, bevelThickness: bevel[0], bevelSize: bevel[1], bevelSegments: bevel[2] }
    : { depth, bevelEnabled: false };
  return new THREE.ExtrudeGeometry(shape, options).translate(0, 0, -depth / 2);
}

export function createJerseyBarrier() {
  const root = new THREE.Group();
  root.name = 'JerseyBarrier';

  // Materials
  const concreteMat = new THREE.MeshStandardMaterial({ name: 'concrete', color: 0xb8b4aa, roughness: 0.95, flatShading: true });
  const darkMat = new THREE.MeshStandardMaterial({ name: 'dark', color: 0x343230, roughness: 1, flatShading: true });
  const steelMat = new THREE.MeshStandardMaterial({ name: 'steel', color: 0x6d7378, roughness: 0.5, metalness: 0.6, flatShading: true });
  const whiteMat = new THREE.MeshStandardMaterial({ name: 'white', color: 0xf1f1ec, roughness: 0.35, emissive: 0xffffff, emissiveIntensity: 0.15, flatShading: true });
  const redMat = new THREE.MeshStandardMaterial({ name: 'red', color: 0xcf2a24, roughness: 0.35, emissive: 0xa01010, emissiveIntensity: 0.25, flatShading: true });
  const amberMat = new THREE.MeshStandardMaterial({ name: 'amber', color: 0xffb22e, roughness: 0.25, emissive: 0xff9a1a, emissiveIntensity: 0.7, flatShading: true });

  // Shared geometries
  const boxGeo = new THREE.BoxGeometry(0.34, 0.07, 0.616);
  const torusGeo = new THREE.TorusGeometry(0.045, 0.012, 4, 8);
  const planeGeo = new THREE.PlaneGeometry(0.24, 0.1);
  const boxGeo2 = new THREE.BoxGeometry(0.08, 0.025, 0.05);

  // Parts
  const barrier = new THREE.Mesh(extrude([[-0.305, 0], [0.305, 0], [0.305, 0.075], [0.2, 0.33], [0.075, 0.81], [-0.075, 0.81], [-0.2, 0.33], [-0.305, 0.075]], 2), concreteMat);
  barrier.name = 'barrier';
  barrier.rotation.set(0, deg(90), 0);
  root.add(barrier);
  const slot = new THREE.Mesh(boxGeo, darkMat);
  slot.name = 'slot';
  slot.position.set(-0.5, 0.035, 0);
  root.add(slot);
  const slot2 = new THREE.Mesh(boxGeo, darkMat);
  slot2.name = 'slot';
  slot2.position.set(0.5, 0.035, 0);
  root.add(slot2);
  const loop = new THREE.Mesh(torusGeo, steelMat);
  loop.name = 'loop';
  loop.position.set(-1.03, 0.2, 0);
  loop.rotation.set(deg(90), 0, 0);
  root.add(loop);
  const loop2 = new THREE.Mesh(torusGeo, steelMat);
  loop2.name = 'loop';
  loop2.position.set(-1.03, 0.62, 0);
  loop2.rotation.set(deg(90), 0, 0);
  root.add(loop2);
  const loop3 = new THREE.Mesh(torusGeo, steelMat);
  loop3.name = 'loop';
  loop3.position.set(1.03, 0.2, 0);
  loop3.rotation.set(deg(90), 0, 0);
  root.add(loop3);
  const loop4 = new THREE.Mesh(torusGeo, steelMat);
  loop4.name = 'loop';
  loop4.position.set(1.03, 0.62, 0);
  loop4.rotation.set(deg(90), 0, 0);
  root.add(loop4);
  const reflectorTape = new THREE.Mesh(planeGeo, whiteMat);
  reflectorTape.name = 'reflectorTape';
  reflectorTape.position.set(-0.875, 0.6, -0.1327);
  reflectorTape.rotation.set(deg(-165.4034), 0, 0);
  root.add(reflectorTape);
  const reflectorTape2 = new THREE.Mesh(planeGeo, redMat);
  reflectorTape2.name = 'reflectorTape';
  reflectorTape2.position.set(-0.625, 0.6, -0.1327);
  reflectorTape2.rotation.set(deg(-165.4034), 0, 0);
  root.add(reflectorTape2);
  const reflectorTape3 = new THREE.Mesh(planeGeo, whiteMat);
  reflectorTape3.name = 'reflectorTape';
  reflectorTape3.position.set(-0.375, 0.6, -0.1327);
  reflectorTape3.rotation.set(deg(-165.4034), 0, 0);
  root.add(reflectorTape3);
  const reflectorTape4 = new THREE.Mesh(planeGeo, redMat);
  reflectorTape4.name = 'reflectorTape';
  reflectorTape4.position.set(-0.125, 0.6, -0.1327);
  reflectorTape4.rotation.set(deg(-165.4034), 0, 0);
  root.add(reflectorTape4);
  const reflectorTape5 = new THREE.Mesh(planeGeo, whiteMat);
  reflectorTape5.name = 'reflectorTape';
  reflectorTape5.position.set(0.125, 0.6, -0.1327);
  reflectorTape5.rotation.set(deg(-165.4034), 0, 0);
  root.add(reflectorTape5);
  const reflectorTape6 = new THREE.Mesh(planeGeo, redMat);
  reflectorTape6.name = 'reflectorTape';
  reflectorTape6.position.set(0.375, 0.6, -0.1327);
  reflectorTape6.rotation.set(deg(-165.4034), 0, 0);
  root.add(reflectorTape6);
  const reflectorTape7 = new THREE.Mesh(planeGeo, whiteMat);
  reflectorTape7.name = 'reflectorTape';
  reflectorTape7.position.set(0.625, 0.6, -0.1327);
  reflectorTape7.rotation.set(deg(-165.4034), 0, 0);
  root.add(reflectorTape7);
  const reflectorTape8 = new THREE.Mesh(planeGeo, redMat);
  reflectorTape8.name = 'reflectorTape';
  reflectorTape8.position.set(0.875, 0.6, -0.1327);
  reflectorTape8.rotation.set(deg(-165.4034), 0, 0);
  root.add(reflectorTape8);
  const reflectorTape9 = new THREE.Mesh(planeGeo, whiteMat);
  reflectorTape9.name = 'reflectorTape';
  reflectorTape9.position.set(-0.875, 0.6, 0.1327);
  reflectorTape9.rotation.set(deg(-14.5966), 0, 0);
  root.add(reflectorTape9);
  const reflectorTape10 = new THREE.Mesh(planeGeo, redMat);
  reflectorTape10.name = 'reflectorTape';
  reflectorTape10.position.set(-0.625, 0.6, 0.1327);
  reflectorTape10.rotation.set(deg(-14.5966), 0, 0);
  root.add(reflectorTape10);
  const reflectorTape11 = new THREE.Mesh(planeGeo, whiteMat);
  reflectorTape11.name = 'reflectorTape';
  reflectorTape11.position.set(-0.375, 0.6, 0.1327);
  reflectorTape11.rotation.set(deg(-14.5966), 0, 0);
  root.add(reflectorTape11);
  const reflectorTape12 = new THREE.Mesh(planeGeo, redMat);
  reflectorTape12.name = 'reflectorTape';
  reflectorTape12.position.set(-0.125, 0.6, 0.1327);
  reflectorTape12.rotation.set(deg(-14.5966), 0, 0);
  root.add(reflectorTape12);
  const reflectorTape13 = new THREE.Mesh(planeGeo, whiteMat);
  reflectorTape13.name = 'reflectorTape';
  reflectorTape13.position.set(0.125, 0.6, 0.1327);
  reflectorTape13.rotation.set(deg(-14.5966), 0, 0);
  root.add(reflectorTape13);
  const reflectorTape14 = new THREE.Mesh(planeGeo, redMat);
  reflectorTape14.name = 'reflectorTape';
  reflectorTape14.position.set(0.375, 0.6, 0.1327);
  reflectorTape14.rotation.set(deg(-14.5966), 0, 0);
  root.add(reflectorTape14);
  const reflectorTape15 = new THREE.Mesh(planeGeo, whiteMat);
  reflectorTape15.name = 'reflectorTape';
  reflectorTape15.position.set(0.625, 0.6, 0.1327);
  reflectorTape15.rotation.set(deg(-14.5966), 0, 0);
  root.add(reflectorTape15);
  const reflectorTape16 = new THREE.Mesh(planeGeo, redMat);
  reflectorTape16.name = 'reflectorTape';
  reflectorTape16.position.set(0.875, 0.6, 0.1327);
  reflectorTape16.rotation.set(deg(-14.5966), 0, 0);
  root.add(reflectorTape16);
  const catEye = new THREE.Mesh(boxGeo2, amberMat);
  catEye.name = 'catEye';
  catEye.position.set(-0.5, 0.8225, 0);
  root.add(catEye);
  const catEye2 = new THREE.Mesh(boxGeo2, amberMat);
  catEye2.name = 'catEye';
  catEye2.position.set(0.5, 0.8225, 0);
  root.add(catEye2);

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

export default createJerseyBarrier;
```

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