# Bollard

> A row of one to five street bollards in three styles: chunky octagonal concrete posts with a painted band, slim steel posts with domed caps and reflective rings, or lit path bollards with a glowing lens under a round cap. Set the count, spacing and accent color to block driveways, line sidewalks, plazas and parking lots in city scenes.

![Bollard preview](https://codels.download/m/bollard.png)

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

## Facts

- Category: Urban & Street › Street Furniture
- Size (W × H × D): 2.63 × 0.95 × 0.24 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 630 · Meshes: 15 · Materials: 3
- License: CC0-1.0 (Codels built-in)
- Tags: bollard, post, low-poly, stylized, modern, city, road, city-builder, obstacle, prop, street-furniture, concrete, metal, emissive, game-ready, instancing-friendly, mobile-friendly, parametric, color-gray, size-medium, poly-low
- Page: https://codels.download/models/bollard

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `count` | int | 1 – 5 | 3 | 3 |
| `style` | select | concrete \| metal \| lit | metal | metal |
| `spacing` | number | 0.8 – 2 | 1.2 | 1.2 |
| `color` | color | #rrggbb | #e3b12c | #e3b12c |

## Parts

- bollard1 (group)
  - flange (cylinder · dark)
  - post (cylinder · steel)
  - cap (sphere · steel)
  - reflectiveRing (cylinder · accent)
  - reflectiveRing (cylinder · accent)
- bollard2 (group)
  - flange (cylinder · dark)
  - post (cylinder · steel)
  - cap (sphere · steel)
  - reflectiveRing (cylinder · accent)
  - reflectiveRing (cylinder · accent)
- bollard3 (group)
  - flange (cylinder · dark)
  - post (cylinder · steel)
  - cap (sphere · steel)
  - reflectiveRing (cylinder · accent)
  - reflectiveRing (cylinder · accent)

## How to use

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

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

## Code

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

export function createBollard() {
  const root = new THREE.Group();
  root.name = 'Bollard';

  // Materials
  const steelMat = new THREE.MeshStandardMaterial({ name: 'steel', color: 0x3a4046, roughness: 0.45, metalness: 0.6, flatShading: true });
  const darkMat = new THREE.MeshStandardMaterial({ name: 'dark', color: 0x24272a, roughness: 0.6, metalness: 0.4, flatShading: true });
  const accentMat = new THREE.MeshStandardMaterial({ name: 'accent', color: 0xe3b12c, roughness: 0.4, flatShading: true });

  // Shared geometries
  const cylinderGeo = new THREE.CylinderGeometry(0.11, 0.12, 0.02, 10);
  const cylinderGeo2 = new THREE.CylinderGeometry(0.07, 0.07, 0.86, 10);
  const sphereGeo = new THREE.SphereGeometry(0.07, 10, 3, 0, Math.PI * 2, 0, Math.PI / 2);
  const cylinderGeo3 = new THREE.CylinderGeometry(0.073, 0.073, 0.05, 10);

  // Parts
  const bollard1 = new THREE.Group();
  bollard1.name = 'bollard1';
  bollard1.position.set(-1.2, 0, 0);
  root.add(bollard1);
  const flange = new THREE.Mesh(cylinderGeo, darkMat);
  flange.name = 'flange';
  flange.position.set(0, 0.01, 0);
  bollard1.add(flange);
  const post = new THREE.Mesh(cylinderGeo2, steelMat);
  post.name = 'post';
  post.position.set(0, 0.45, 0);
  bollard1.add(post);
  const cap = new THREE.Mesh(sphereGeo, steelMat);
  cap.name = 'cap';
  cap.position.set(0, 0.88, 0);
  bollard1.add(cap);
  const reflectiveRing = new THREE.Mesh(cylinderGeo3, accentMat);
  reflectiveRing.name = 'reflectiveRing';
  reflectiveRing.position.set(0, 0.685, 0);
  bollard1.add(reflectiveRing);
  const reflectiveRing2 = new THREE.Mesh(cylinderGeo3, accentMat);
  reflectiveRing2.name = 'reflectiveRing';
  reflectiveRing2.position.set(0, 0.785, 0);
  bollard1.add(reflectiveRing2);
  const bollard2 = new THREE.Group();
  bollard2.name = 'bollard2';
  root.add(bollard2);
  const flange2 = new THREE.Mesh(cylinderGeo, darkMat);
  flange2.name = 'flange';
  flange2.position.set(0, 0.01, 0);
  bollard2.add(flange2);
  const post2 = new THREE.Mesh(cylinderGeo2, steelMat);
  post2.name = 'post';
  post2.position.set(0, 0.45, 0);
  bollard2.add(post2);
  const cap2 = new THREE.Mesh(sphereGeo, steelMat);
  cap2.name = 'cap';
  cap2.position.set(0, 0.88, 0);
  bollard2.add(cap2);
  const reflectiveRing3 = new THREE.Mesh(cylinderGeo3, accentMat);
  reflectiveRing3.name = 'reflectiveRing';
  reflectiveRing3.position.set(0, 0.685, 0);
  bollard2.add(reflectiveRing3);
  const reflectiveRing4 = new THREE.Mesh(cylinderGeo3, accentMat);
  reflectiveRing4.name = 'reflectiveRing';
  reflectiveRing4.position.set(0, 0.785, 0);
  bollard2.add(reflectiveRing4);
  const bollard3 = new THREE.Group();
  bollard3.name = 'bollard3';
  bollard3.position.set(1.2, 0, 0);
  root.add(bollard3);
  const flange3 = new THREE.Mesh(cylinderGeo, darkMat);
  flange3.name = 'flange';
  flange3.position.set(0, 0.01, 0);
  bollard3.add(flange3);
  const post3 = new THREE.Mesh(cylinderGeo2, steelMat);
  post3.name = 'post';
  post3.position.set(0, 0.45, 0);
  bollard3.add(post3);
  const cap3 = new THREE.Mesh(sphereGeo, steelMat);
  cap3.name = 'cap';
  cap3.position.set(0, 0.88, 0);
  bollard3.add(cap3);
  const reflectiveRing5 = new THREE.Mesh(cylinderGeo3, accentMat);
  reflectiveRing5.name = 'reflectiveRing';
  reflectiveRing5.position.set(0, 0.685, 0);
  bollard3.add(reflectiveRing5);
  const reflectiveRing6 = new THREE.Mesh(cylinderGeo3, accentMat);
  reflectiveRing6.name = 'reflectiveRing';
  reflectiveRing6.position.set(0, 0.785, 0);
  bollard3.add(reflectiveRing6);

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

export default createBollard;
```

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