# Bread

> Freshly baked low-poly bread in three classic shapes: a domed pan loaf with crumb-colored score marks, a long crusty baguette with diagonal slashes, or a puffy layered croissant curling into a crescent. Real-world bakery sizes (loaf about 24 cm, baguette 55 cm), with a crust color and scale control for bakeries, kitchens, market stalls, picnics and survival food pickups.

![Bread preview](https://codels.download/m/bread.png)

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

## Facts

- Category: Food & Drink › Meals & Snacks
- Size (W × H × D): 0.14 × 0.13 × 0.23 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 368 · Meshes: 6 · Materials: 3
- License: CC0-1.0 (Codels built-in)
- Tags: bread, cartoon, low-poly, stylized, farm, kitchen, medieval, village, farming-sim, rpg, survival, collectible, food, pickup, prop, organic, game-ready, mobile-friendly, parametric, color-brown, color-orange, size-tiny, poly-low
- Page: https://codels.download/models/bread

## Files

| Format | URL |
|---|---|
| three.js ES module (`createBread()`) | https://codels.download/m/bread.js |
| React Three Fiber component (`<Bread />`) | https://codels.download/m/bread.jsx |
| Instancing module (`createBreadInstances(count, place)`, one draw call per material) | https://codels.download/m/bread.instanced.js |
| Standalone HTML demo | https://codels.download/m/bread.html |
| glTF binary | https://codels.download/m/bread.glb |
| glTF binary, Meshopt-compressed (2–3× smaller; GLTFLoader needs `setMeshoptDecoder(MeshoptDecoder)`) | https://codels.download/m/bread.glb?compress=meshopt |
| glTF JSON | https://codels.download/m/bread.gltf |
| OBJ (vertex colors) + MTL | https://codels.download/m/bread.obj · https://codels.download/m/bread.mtl |
| STL | https://codels.download/m/bread.stl |
| CodelSpec JSON | https://codels.download/m/bread.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 | loaf \| baguette \| croissant | loaf | loaf |
| `crust` | color | #rrggbb | #c98339 | #c98339 |
| `scale` | number | 0.5 – 3 | 1 | 1 |

## Parts

- loaf (group)
  - loafBody (extrude · crust)
  - tinLine (box · dark)
  - score1 (sphere · crumb)
  - score2 (sphere · crumb)
  - score3 (sphere · crumb)
  - score4 (sphere · crumb)

## How to use

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

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

## Code

```js
/**
 * Bread — Codels 3D model library (https://codels.download/models/bread)
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
 * Triangles: 368 · Size (W × H × D): 0.14 × 0.13 × 0.23 m
 *
 * Usage:
 *   import { createBread } from './bread.js';
 *   
 *   const model = createBread();
 *   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 createBread() {
  const root = new THREE.Group();
  root.name = 'Bread';

  // Materials
  const crustMat = new THREE.MeshStandardMaterial({ name: 'crust', color: 0xc98339, roughness: 0.75, flatShading: true });
  const darkMat = new THREE.MeshStandardMaterial({ name: 'dark', color: 0x9d662c, roughness: 0.8, flatShading: true });
  const crumbMat = new THREE.MeshStandardMaterial({ name: 'crumb', color: 0xf0d2a5, roughness: 0.9, flatShading: true });

  // Shared geometries
  const sphereGeo = new THREE.SphereGeometry(1, 8, 4);

  // Parts
  const loaf = new THREE.Group();
  loaf.name = 'loaf';
  root.add(loaf);
  const loafBody = new THREE.Mesh(extrude([[-0.05, 0], [0.05, 0], [0.053, 0.05], [0.06, 0.064], [0.061, 0.078], [0.052, 0.094], [0.034, 0.104], [0.012, 0.108], [-0.012, 0.108], [-0.034, 0.104], [-0.052, 0.094], [-0.061, 0.078], [-0.06, 0.064], [-0.053, 0.05]], 0.2, [], [0.014, 0.008, 2]), crustMat);
  loafBody.name = 'loafBody';
  loafBody.position.set(0, 0.008, 0);
  loaf.add(loafBody);
  const tinLine = new THREE.Mesh(new THREE.BoxGeometry(0.124, 0.006, 0.226), darkMat);
  tinLine.name = 'tinLine';
  tinLine.position.set(0, 0.062, 0);
  loaf.add(tinLine);
  const score1 = new THREE.Mesh(sphereGeo, crumbMat);
  score1.name = 'score1';
  score1.position.set(0, 0.121, -0.075);
  score1.rotation.set(0, deg(28), 0);
  score1.scale.set(0.036, 0.006, 0.008);
  loaf.add(score1);
  const score2 = new THREE.Mesh(sphereGeo, crumbMat);
  score2.name = 'score2';
  score2.position.set(0, 0.121, -0.025);
  score2.rotation.set(0, deg(28), 0);
  score2.scale.set(0.036, 0.006, 0.008);
  loaf.add(score2);
  const score3 = new THREE.Mesh(sphereGeo, crumbMat);
  score3.name = 'score3';
  score3.position.set(0, 0.121, 0.025);
  score3.rotation.set(0, deg(28), 0);
  score3.scale.set(0.036, 0.006, 0.008);
  loaf.add(score3);
  const score4 = new THREE.Mesh(sphereGeo, crumbMat);
  score4.name = 'score4';
  score4.position.set(0, 0.121, 0.075);
  score4.rotation.set(0, deg(28), 0);
  score4.scale.set(0.036, 0.006, 0.008);
  loaf.add(score4);

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

export default createBread;
```

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