# Cake

> A layered celebration cake on a white plate: sponge layers with cream filling, a frosted top with dripping edges and piped cream dollops, crowned with cherries or lit birthday candles. Stack one to three tiers and pick the frosting color — perfect for birthday parties, bakeries and cozy kitchens.

![Cake preview](https://codels.download/m/cake.png)

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

## Facts

- Category: Food & Drink › Meals & Snacks
- Size (W × H × D): 0.32 × 0.22 × 0.32 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 1,100 · Meshes: 33 · Materials: 7
- License: CC0-1.0 (Codels built-in)
- Tags: birthday-cake, cake, dessert, cartoon, low-poly, stylized, candy, kitchen, party-game, collectible, decoration, food, prop, round, emissive, game-ready, mobile-friendly, parametric, color-orange, color-white, size-small, poly-low
- Page: https://codels.download/models/cake

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `tiers` | int | 1 – 3 | 1 | 1 |
| `frosting` | color | #rrggbb | #f7a6c4 | #f7a6c4 |
| `topping` | select | cherries \| candles \| none | candles | candles |

## Parts

- plate (lathe · plate)
- tier1Sponge (cylinder · sponge)
- tier1Cream1 (cylinder · cream)
- tier1Cream2 (cylinder · cream)
- tier1Frosting (lathe · frosting)
- tier1Drip1 (capsule · frosting)
- tier1Drip2 (capsule · frosting)
- tier1Drip3 (capsule · frosting)
- tier1Drip4 (capsule · frosting)
- tier1Drip5 (capsule · frosting)
- tier1Drip6 (capsule · frosting)
- tier1Drip7 (capsule · frosting)
- tier1Drip8 (capsule · frosting)
- tier1Drip9 (capsule · frosting)
- tier1Drip10 (capsule · frosting)
- dollop1 (cone · cream)
- dollop2 (cone · cream)
- dollop3 (cone · cream)
- dollop4 (cone · cream)
- dollop5 (cone · cream)
- dollop6 (cone · cream)
- dollop7 (cone · cream)
- dollop8 (cone · cream)
- candle1 (cylinder · candleB)
- flame1 (octahedron · flame)
- candle2 (cylinder · candleA)
- flame2 (octahedron · flame)
- candle3 (cylinder · candleB)
- flame3 (octahedron · flame)
- candle4 (cylinder · candleA)
- flame4 (octahedron · flame)
- candle5 (cylinder · candleB)
- flame5 (octahedron · flame)

## How to use

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

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

## Code

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

const deg = THREE.MathUtils.degToRad;

// Revolve a 2D profile [[radius, y], ...] around the Y axis.
function lathe(points, segments, phiStart = 0, phiLength = Math.PI * 2) {
  return new THREE.LatheGeometry(points.map(([x, y]) => new THREE.Vector2(x, y)), segments, phiStart, phiLength);
}

export function createCake() {
  const root = new THREE.Group();
  root.name = 'Cake';

  // Materials
  const plateMat = new THREE.MeshStandardMaterial({ name: 'plate', color: 0xf4f4f6, roughness: 0.3, flatShading: true });
  const spongeMat = new THREE.MeshStandardMaterial({ name: 'sponge', color: 0xe8b46e, roughness: 0.85, flatShading: true });
  const creamMat = new THREE.MeshStandardMaterial({ name: 'cream', color: 0xfff4e3, roughness: 0.6, flatShading: true });
  const frostingMat = new THREE.MeshStandardMaterial({ name: 'frosting', color: 0xf7a6c4, roughness: 0.45 });
  const candleAMat = new THREE.MeshStandardMaterial({ name: 'candleA', color: 0x7fc8f8, roughness: 0.5, flatShading: true });
  const candleBMat = new THREE.MeshStandardMaterial({ name: 'candleB', color: 0xffe066, roughness: 0.5, flatShading: true });
  const flameMat = new THREE.MeshStandardMaterial({ name: 'flame', color: 0xff9a3c, roughness: 0.3, emissive: 0xff6a00, emissiveIntensity: 1.8, flatShading: true });

  // Shared geometries
  const cylinderGeo = new THREE.CylinderGeometry(0.1212, 0.1212, 0.0109, 18, 1, true);
  const capsuleGeo = new THREE.CapsuleGeometry(0.007, 0.016, 1, 5);
  const coneGeo = new THREE.ConeGeometry(0.015, 0.026, 7);
  const cylinderGeo2 = new THREE.CylinderGeometry(0.0045, 0.0045, 0.05, 6);
  const octahedronGeo = new THREE.OctahedronGeometry(0.007, 0);

  // Parts
  const plate = new THREE.Mesh(lathe([[0, 0], [0.12, 0], [0.128, 0.008], [0.16, 0.016], [0.1552, 0.02], [0.128, 0.012], [0, 0.012]], 20), plateMat);
  plate.name = 'plate';
  root.add(plate);
  const tier1Sponge = new THREE.Mesh(new THREE.CylinderGeometry(0.12, 0.12, 0.1238, 18), spongeMat);
  tier1Sponge.name = 'tier1Sponge';
  tier1Sponge.position.set(0, 0.0739, 0);
  root.add(tier1Sponge);
  const tier1Cream1 = new THREE.Mesh(cylinderGeo, creamMat);
  tier1Cream1.name = 'tier1Cream1';
  tier1Cream1.position.set(0, 0.0515, 0);
  root.add(tier1Cream1);
  const tier1Cream2 = new THREE.Mesh(cylinderGeo, creamMat);
  tier1Cream2.name = 'tier1Cream2';
  tier1Cream2.position.set(0, 0.0963, 0);
  root.add(tier1Cream2);
  const tier1Frosting = new THREE.Mesh(lathe([[0.108, 0.1318], [0.124, 0.1318], [0.126, 0.1418], [0.116, 0.1488], [0, 0.1498]], 18), frostingMat);
  tier1Frosting.name = 'tier1Frosting';
  root.add(tier1Frosting);
  const tier1Drip1 = new THREE.Mesh(new THREE.CapsuleGeometry(0.007, 0.0317, 1, 5), frostingMat);
  tier1Drip1.name = 'tier1Drip1';
  tier1Drip1.position.set(0.1208, 0.1199, -0.0063);
  root.add(tier1Drip1);
  const tier1Drip2 = new THREE.Mesh(capsuleGeo, frostingMat);
  tier1Drip2.name = 'tier1Drip2';
  tier1Drip2.position.set(0.0923, 0.1278, -0.0782);
  root.add(tier1Drip2);
  const tier1Drip3 = new THREE.Mesh(new THREE.CapsuleGeometry(0.007, 0.0219, 1, 5), frostingMat);
  tier1Drip3.name = 'tier1Drip3';
  tier1Drip3.position.set(0.0403, 0.1248, -0.1141);
  root.add(tier1Drip3);
  const tier1Drip4 = new THREE.Mesh(new THREE.CapsuleGeometry(0.007, 0.0336, 1, 5), frostingMat);
  tier1Drip4.name = 'tier1Drip4';
  tier1Drip4.position.set(-0.0225, 0.1189, -0.1189);
  root.add(tier1Drip4);
  const tier1Drip5 = new THREE.Mesh(new THREE.CapsuleGeometry(0.007, 0.0283, 1, 5), frostingMat);
  tier1Drip5.name = 'tier1Drip5';
  tier1Drip5.position.set(-0.1041, 0.1216, -0.0616);
  root.add(tier1Drip5);
  const tier1Drip6 = new THREE.Mesh(new THREE.CapsuleGeometry(0.007, 0.0296, 1, 5), frostingMat);
  tier1Drip6.name = 'tier1Drip6';
  tier1Drip6.position.set(-0.1208, 0.121, -0.0065);
  root.add(tier1Drip6);
  const tier1Drip7 = new THREE.Mesh(new THREE.CapsuleGeometry(0.007, 0.0234, 1, 5), frostingMat);
  tier1Drip7.name = 'tier1Drip7';
  tier1Drip7.position.set(-0.0963, 0.124, 0.0732);
  root.add(tier1Drip7);
  const tier1Drip8 = new THREE.Mesh(capsuleGeo, frostingMat);
  tier1Drip8.name = 'tier1Drip8';
  tier1Drip8.position.set(-0.0297, 0.1278, 0.1173);
  root.add(tier1Drip8);
  const tier1Drip9 = new THREE.Mesh(new THREE.CapsuleGeometry(0.007, 0.0302, 1, 5), frostingMat);
  tier1Drip9.name = 'tier1Drip9';
  tier1Drip9.position.set(0.0447, 0.1207, 0.1124);
  root.add(tier1Drip9);
  const tier1Drip10 = new THREE.Mesh(new THREE.CapsuleGeometry(0.007, 0.0207, 1, 5), frostingMat);
  tier1Drip10.name = 'tier1Drip10';
  tier1Drip10.position.set(0.1047, 0.1254, 0.0606);
  root.add(tier1Drip10);
  const dollop1 = new THREE.Mesh(coneGeo, creamMat);
  dollop1.name = 'dollop1';
  dollop1.position.set(0.0843, 0.1568, -0.0349);
  root.add(dollop1);
  const dollop2 = new THREE.Mesh(coneGeo, creamMat);
  dollop2.name = 'dollop2';
  dollop2.position.set(0.0349, 0.1568, -0.0843);
  dollop2.rotation.set(0, deg(20), 0);
  root.add(dollop2);
  const dollop3 = new THREE.Mesh(coneGeo, creamMat);
  dollop3.name = 'dollop3';
  dollop3.position.set(-0.0349, 0.1568, -0.0843);
  dollop3.rotation.set(0, deg(40), 0);
  root.add(dollop3);
  const dollop4 = new THREE.Mesh(coneGeo, creamMat);
  dollop4.name = 'dollop4';
  dollop4.position.set(-0.0843, 0.1568, -0.0349);
  dollop4.rotation.set(0, deg(60), 0);
  root.add(dollop4);
  const dollop5 = new THREE.Mesh(coneGeo, creamMat);
  dollop5.name = 'dollop5';
  dollop5.position.set(-0.0843, 0.1568, 0.0349);
  dollop5.rotation.set(0, deg(80), 0);
  root.add(dollop5);
  const dollop6 = new THREE.Mesh(coneGeo, creamMat);
  dollop6.name = 'dollop6';
  dollop6.position.set(-0.0349, 0.1568, 0.0843);
  dollop6.rotation.set(0, deg(100), 0);
  root.add(dollop6);
  const dollop7 = new THREE.Mesh(coneGeo, creamMat);
  dollop7.name = 'dollop7';
  dollop7.position.set(0.0349, 0.1568, 0.0843);
  dollop7.rotation.set(0, deg(120), 0);
  root.add(dollop7);
  const dollop8 = new THREE.Mesh(coneGeo, creamMat);
  dollop8.name = 'dollop8';
  dollop8.position.set(0.0843, 0.1568, 0.0349);
  dollop8.rotation.set(0, deg(140), 0);
  root.add(dollop8);
  const candle1 = new THREE.Mesh(cylinderGeo2, candleBMat);
  candle1.name = 'candle1';
  candle1.position.set(0.0504, 0.1688, 0);
  root.add(candle1);
  const flame1 = new THREE.Mesh(octahedronGeo, flameMat);
  flame1.name = 'flame1';
  flame1.position.set(0.0504, 0.2068, 0);
  flame1.scale.set(0.8, 1.7, 0.8);
  root.add(flame1);
  const candle2 = new THREE.Mesh(cylinderGeo2, candleAMat);
  candle2.name = 'candle2';
  candle2.position.set(0.0156, 0.1688, -0.0479);
  root.add(candle2);
  const flame2 = new THREE.Mesh(octahedronGeo, flameMat);
  flame2.name = 'flame2';
  flame2.position.set(0.0156, 0.2068, -0.0479);
  flame2.scale.set(0.8, 1.7, 0.8);
  root.add(flame2);
  const candle3 = new THREE.Mesh(cylinderGeo2, candleBMat);
  candle3.name = 'candle3';
  candle3.position.set(-0.0408, 0.1688, -0.0296);
  root.add(candle3);
  const flame3 = new THREE.Mesh(octahedronGeo, flameMat);
  flame3.name = 'flame3';
  flame3.position.set(-0.0408, 0.2068, -0.0296);
  flame3.scale.set(0.8, 1.7, 0.8);
  root.add(flame3);
  const candle4 = new THREE.Mesh(cylinderGeo2, candleAMat);
  candle4.name = 'candle4';
  candle4.position.set(-0.0408, 0.1688, 0.0296);
  root.add(candle4);
  const flame4 = new THREE.Mesh(octahedronGeo, flameMat);
  flame4.name = 'flame4';
  flame4.position.set(-0.0408, 0.2068, 0.0296);
  flame4.scale.set(0.8, 1.7, 0.8);
  root.add(flame4);
  const candle5 = new THREE.Mesh(cylinderGeo2, candleBMat);
  candle5.name = 'candle5';
  candle5.position.set(0.0156, 0.1688, 0.0479);
  root.add(candle5);
  const flame5 = new THREE.Mesh(octahedronGeo, flameMat);
  flame5.name = 'flame5';
  flame5.position.set(0.0156, 0.2068, 0.0479);
  flame5.scale.set(0.8, 1.7, 0.8);
  root.add(flame5);

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

export default createCake;
```

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