# Bike Rack

> A row of one to six inverted-U hoop stands for parking bicycles, bent from powder-coated steel tube and either bolted onto two ground rails or set into the pavement with flange plates. Each hoop is 0.85 m tall and parks a bike on either side. Set the slot count and color for sidewalks, schools, parks, train stations and city plazas.

![Bike Rack preview](https://codels.download/m/bike-rack.png)

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

## Facts

- Category: Urban & Street › Street Furniture
- Size (W × H × D): 2.10 × 0.88 × 0.77 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 696 · Meshes: 15 · Materials: 3
- License: CC0-1.0 (Codels built-in)
- Tags: bicycle, bike-rack, low-poly, stylized, modern, city, garden, city-builder, decoration, interactable, prop, street-furniture, metal, game-ready, instancing-friendly, mobile-friendly, parametric, color-blue, color-gray, size-medium, poly-low
- Page: https://codels.download/models/bike-rack

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `slots` | int | 1 – 6 | 3 | 3 |
| `color` | color | #rrggbb | #2f6fa8 | #2f6fa8 |
| `rails` | boolean | true \| false | true | true |

## Parts

- hoop1 (group)
  - leg (cylinder · tube)
  - leg (cylinder · tube)
  - bend (torus · tube)
- hoop2 (group)
  - leg (cylinder · tube)
  - leg (cylinder · tube)
  - bend (torus · tube)
- hoop3 (group)
  - leg (cylinder · tube)
  - leg (cylinder · tube)
  - bend (torus · tube)
- rail (box · steel)
- bolt (cylinder · bolt)
- bolt (cylinder · bolt)
- rail (box · steel)
- bolt (cylinder · bolt)
- bolt (cylinder · bolt)

## How to use

Save the code below as `bike-rack.js`, then:

```js
import { createBikeRack } from './bike-rack.js';
const model = createBikeRack();
scene.add(model);
```

## Code

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

const deg = THREE.MathUtils.degToRad;

export function createBikeRack() {
  const root = new THREE.Group();
  root.name = 'BikeRack';

  // Materials
  const tubeMat = new THREE.MeshStandardMaterial({ name: 'tube', color: 0x2f6fa8, roughness: 0.45, metalness: 0.35, flatShading: true });
  const steelMat = new THREE.MeshStandardMaterial({ name: 'steel', color: 0x5a6066, roughness: 0.5, metalness: 0.6, flatShading: true });
  const boltMat = new THREE.MeshStandardMaterial({ name: 'bolt', color: 0x2b2e31, roughness: 0.5, metalness: 0.5, flatShading: true });

  // Shared geometries
  const cylinderGeo = new THREE.CylinderGeometry(0.026, 0.026, 0.46, 8, 1, true);
  const torusGeo = new THREE.TorusGeometry(0.34, 0.026, 8, 10, Math.PI);
  const boxGeo = new THREE.BoxGeometry(2.1, 0.05, 0.09);
  const cylinderGeo2 = new THREE.CylinderGeometry(0.014, 0.014, 0.012, 6);

  // Parts
  const hoop1 = new THREE.Group();
  hoop1.name = 'hoop1';
  hoop1.position.set(-0.8, 0, 0);
  root.add(hoop1);
  const leg = new THREE.Mesh(cylinderGeo, tubeMat);
  leg.name = 'leg';
  leg.position.set(0, 0.28, -0.34);
  hoop1.add(leg);
  const leg2 = new THREE.Mesh(cylinderGeo, tubeMat);
  leg2.name = 'leg';
  leg2.position.set(0, 0.28, 0.34);
  hoop1.add(leg2);
  const bend = new THREE.Mesh(torusGeo, tubeMat);
  bend.name = 'bend';
  bend.position.set(0, 0.51, 0);
  bend.rotation.set(0, deg(90), 0);
  hoop1.add(bend);
  const hoop2 = new THREE.Group();
  hoop2.name = 'hoop2';
  root.add(hoop2);
  const leg3 = new THREE.Mesh(cylinderGeo, tubeMat);
  leg3.name = 'leg';
  leg3.position.set(0, 0.28, -0.34);
  hoop2.add(leg3);
  const leg4 = new THREE.Mesh(cylinderGeo, tubeMat);
  leg4.name = 'leg';
  leg4.position.set(0, 0.28, 0.34);
  hoop2.add(leg4);
  const bend2 = new THREE.Mesh(torusGeo, tubeMat);
  bend2.name = 'bend';
  bend2.position.set(0, 0.51, 0);
  bend2.rotation.set(0, deg(90), 0);
  hoop2.add(bend2);
  const hoop3 = new THREE.Group();
  hoop3.name = 'hoop3';
  hoop3.position.set(0.8, 0, 0);
  root.add(hoop3);
  const leg5 = new THREE.Mesh(cylinderGeo, tubeMat);
  leg5.name = 'leg';
  leg5.position.set(0, 0.28, -0.34);
  hoop3.add(leg5);
  const leg6 = new THREE.Mesh(cylinderGeo, tubeMat);
  leg6.name = 'leg';
  leg6.position.set(0, 0.28, 0.34);
  hoop3.add(leg6);
  const bend3 = new THREE.Mesh(torusGeo, tubeMat);
  bend3.name = 'bend';
  bend3.position.set(0, 0.51, 0);
  bend3.rotation.set(0, deg(90), 0);
  hoop3.add(bend3);
  const rail = new THREE.Mesh(boxGeo, steelMat);
  rail.name = 'rail';
  rail.position.set(0, 0.025, -0.34);
  root.add(rail);
  const bolt = new THREE.Mesh(cylinderGeo2, boltMat);
  bolt.name = 'bolt';
  bolt.position.set(-0.98, 0.056, -0.34);
  root.add(bolt);
  const bolt2 = new THREE.Mesh(cylinderGeo2, boltMat);
  bolt2.name = 'bolt';
  bolt2.position.set(0.98, 0.056, -0.34);
  root.add(bolt2);
  const rail2 = new THREE.Mesh(boxGeo, steelMat);
  rail2.name = 'rail';
  rail2.position.set(0, 0.025, 0.34);
  root.add(rail2);
  const bolt3 = new THREE.Mesh(cylinderGeo2, boltMat);
  bolt3.name = 'bolt';
  bolt3.position.set(-0.98, 0.056, 0.34);
  root.add(bolt3);
  const bolt4 = new THREE.Mesh(cylinderGeo2, boltMat);
  bolt4.name = 'bolt';
  bolt4.position.set(0.98, 0.056, 0.34);
  root.add(bolt4);

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

export default createBikeRack;
```

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