# Trash Bin

> A street trash bin with a lid in two styles: a round ribbed metal garbage can with side handles and a domed lid, or a square park bin with colored vertical slats on a dark metal frame. Choose the color and show the lid closed or flipped open with crumpled paper inside. Handy street furniture for city, park and alley scenes.

![Trash Bin preview](https://codels.download/m/trash-bin.png)

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

## Facts

- Category: Urban & Street › Street Furniture
- Size (W × H × D): 0.75 × 1.07 × 0.63 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 564 · Meshes: 11 · Materials: 2
- License: CC0-1.0 (Codels built-in)
- Tags: trash-bin, cartoon, low-poly, stylized, modern, city, garden, road, city-builder, container, decoration, prop, street-furniture, metal, instancing-friendly, mobile-friendly, parametric, color-green, size-medium, poly-low
- Page: https://codels.download/models/trash-bin

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `style` | select | round \| square | round | round |
| `color` | color | #rrggbb | #3f7d5a | #3f7d5a |
| `open` | boolean | true \| false | false | false |

## Parts

- footRing (cylinder · frame)
- can (cylinder · body)
- rib (cylinder · body)
- rib (cylinder · body)
- rib (cylinder · body)
- rim (torus · frame)
- sideHandle (torus · frame)
- sideHandle (torus · frame)
- lid (group)
  - lidRim (cylinder · body)
  - lidDome (sphere · body)
  - lidHandle (torus · frame)

## How to use

Save the code below as `trash-bin.js`, then:

```js
import { createTrashBin } from './trash-bin.js';
const model = createTrashBin();
scene.add(model);
```

## Code

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

const deg = THREE.MathUtils.degToRad;

export function createTrashBin() {
  const root = new THREE.Group();
  root.name = 'TrashBin';

  // Materials
  const bodyMat = new THREE.MeshStandardMaterial({ name: 'body', color: 0x3f7d5a, roughness: 0.55, metalness: 0.3, flatShading: true });
  const frameMat = new THREE.MeshStandardMaterial({ name: 'frame', color: 0x3a3f44, roughness: 0.5, metalness: 0.6, flatShading: true });

  // Shared geometries
  const torusGeo = new THREE.TorusGeometry(0.07, 0.013, 3, 8, Math.PI);

  // Parts
  const footRing = new THREE.Mesh(new THREE.CylinderGeometry(0.27, 0.275, 0.04, 12), frameMat);
  footRing.name = 'footRing';
  footRing.position.set(0, 0.02, 0);
  root.add(footRing);
  const can = new THREE.Mesh(new THREE.CylinderGeometry(0.29, 0.26, 0.82, 12, 1, true), bodyMat);
  can.name = 'can';
  can.position.set(0, 0.45, 0);
  root.add(can);
  const rib = new THREE.Mesh(new THREE.CylinderGeometry(0.279, 0.279, 0.035, 12), bodyMat);
  rib.name = 'rib';
  rib.position.set(0, 0.2175, 0);
  root.add(rib);
  const rib2 = new THREE.Mesh(new THREE.CylinderGeometry(0.2867, 0.2867, 0.035, 12), bodyMat);
  rib2.name = 'rib';
  rib2.position.set(0, 0.4375, 0);
  root.add(rib2);
  const rib3 = new THREE.Mesh(new THREE.CylinderGeometry(0.2943, 0.2943, 0.035, 12), bodyMat);
  rib3.name = 'rib';
  rib3.position.set(0, 0.6575, 0);
  root.add(rib3);
  const rim = new THREE.Mesh(new THREE.TorusGeometry(0.294, 0.016, 4, 12), frameMat);
  rim.name = 'rim';
  rim.position.set(0, 0.848, 0);
  rim.rotation.set(deg(90), 0, 0);
  root.add(rim);
  const sideHandle = new THREE.Mesh(torusGeo, frameMat);
  sideHandle.name = 'sideHandle';
  sideHandle.position.set(-0.2901, 0.72, 0);
  sideHandle.rotation.set(deg(90), deg(180), deg(-90));
  root.add(sideHandle);
  const sideHandle2 = new THREE.Mesh(torusGeo, frameMat);
  sideHandle2.name = 'sideHandle';
  sideHandle2.position.set(0.2901, 0.72, 0);
  sideHandle2.rotation.set(deg(90), 0, deg(-90));
  root.add(sideHandle2);
  const lid = new THREE.Group();
  lid.name = 'lid';
  lid.position.set(0, 0.86, 0);
  root.add(lid);
  const lidRim = new THREE.Mesh(new THREE.CylinderGeometry(0.315, 0.315, 0.04, 12), bodyMat);
  lidRim.name = 'lidRim';
  lidRim.position.set(0, 0.02, 0);
  lid.add(lidRim);
  const lidDome = new THREE.Mesh(new THREE.SphereGeometry(0.305, 12, 3, 0, Math.PI * 2, 0, Math.PI / 2), bodyMat);
  lidDome.name = 'lidDome';
  lidDome.position.set(0, 0.04, 0);
  lidDome.scale.set(1, 0.32, 1);
  lid.add(lidDome);
  const lidHandle = new THREE.Mesh(new THREE.TorusGeometry(0.07, 0.014, 3, 8, Math.PI), frameMat);
  lidHandle.name = 'lidHandle';
  lidHandle.position.set(0, 0.1276, 0);
  lid.add(lidHandle);

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

export default createTrashBin;
```

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