# Traffic Cone

> A classic low-poly traffic cone with a square rubber base, rounded tip and bright reflective white collars. Set the height (from small 30 cm to tall 1 m cones), body color and number of stripes. A must-have obstacle for roadworks, parking lots, racing tracks and construction sites; light enough to scatter by the hundred.

![Traffic Cone preview](https://codels.download/m/traffic-cone.png)

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

## Facts

- Category: Urban & Street › Traffic
- Size (W × H × D): 0.39 × 0.72 × 0.39 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 260 · Meshes: 6 · Materials: 3
- License: CC0-1.0 (Codels built-in)
- Tags: traffic-cone, cartoon, low-poly, stylized, construction, modern, racing, city, road, racing-game, decoration, obstacle, prop, plastic, game-ready, instancing-friendly, mobile-friendly, parametric, color-gray, color-orange, size-small, poly-ultra-low
- Page: https://codels.download/models/traffic-cone

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `height` | number | 0.3 – 1 | 0.7 | 0.7 |
| `color` | color | #rrggbb | #f26a1b | #f26a1b |
| `stripes` | int | 0 – 3 | 2 | 2 |

## Parts

- base (box · base)
- baseCollar (cylinder · base)
- cone (cylinder · cone)
- tip (sphere · cone)
- stripe (cylinder · stripe)
- stripe (cylinder · stripe)

## How to use

Save the code below as `traffic-cone.js`, then:

```js
import { createTrafficCone } from './traffic-cone.js';
const model = createTrafficCone();
scene.add(model);
```

## Code

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

export function createTrafficCone() {
  const root = new THREE.Group();
  root.name = 'TrafficCone';

  // Materials
  const coneMat = new THREE.MeshStandardMaterial({ name: 'cone', color: 0xf26a1b, roughness: 0.6, flatShading: true });
  const stripeMat = new THREE.MeshStandardMaterial({ name: 'stripe', color: 0xf4f4f0, roughness: 0.3, metalness: 0.1, flatShading: true });
  const baseMat = new THREE.MeshStandardMaterial({ name: 'base', color: 0x26292c, roughness: 0.9, flatShading: true });

  // Parts
  const base = new THREE.Mesh(new THREE.BoxGeometry(0.385, 0.0315, 0.385), baseMat);
  base.name = 'base';
  base.position.set(0, 0.0158, 0);
  root.add(base);
  const baseCollar = new THREE.Mesh(new THREE.CylinderGeometry(0.159, 0.167, 0.0252, 12), baseMat);
  baseCollar.name = 'baseCollar';
  baseCollar.position.set(0, 0.0315, 0);
  root.add(baseCollar);
  const cone = new THREE.Mesh(new THREE.CylinderGeometry(0.0245, 0.147, 0.6685, 12), coneMat);
  cone.name = 'cone';
  cone.position.set(0, 0.3658, 0);
  root.add(cone);
  const tip = new THREE.Mesh(new THREE.SphereGeometry(0.025, 8, 4, 0, Math.PI * 2, 0, Math.PI / 2), coneMat);
  tip.name = 'tip';
  tip.position.set(0, 0.7, 0);
  root.add(tip);
  const stripe = new THREE.Mesh(new THREE.CylinderGeometry(0.0993, 0.1152, 0.0869, 12), stripeMat);
  stripe.name = 'stripe';
  stripe.position.set(0, 0.2855, 0);
  root.add(stripe);
  const stripe2 = new THREE.Mesh(new THREE.CylinderGeometry(0.0625, 0.0785, 0.0869, 12), stripeMat);
  stripe2.name = 'stripe';
  stripe2.position.set(0, 0.4861, 0);
  root.add(stripe2);

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

export default createTrafficCone;
```

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