# Cardboard Box

> A corrugated cardboard shipping box with packing tape over the seam, a white shipping label and printed this-way-up arrows. Stack one to three boxes of slightly different sizes, and open the top one to show its four folded-out flaps and the dark inside. Recolor the cardboard and scale it from a shoebox to a moving carton — handy clutter for warehouses, offices, apartments, moving days and delivery games.

![Cardboard Box preview](https://codels.download/m/cardboard-box.png)

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

## Facts

- Category: Props › Containers
- Size (W × H × D): 0.66 × 0.69 × 0.57 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 564 · Meshes: 43 · Materials: 6
- License: CC0-1.0 (Codels built-in)
- Tags: cardboard-box, carton, package, parcel, low-poly, stylized, industrial, modern, office, city, interior, container, interactable, prop, paper, boxy-shape, cluster, game-ready, instancing-friendly, mobile-friendly, parametric, color-brown, color-orange, size-small, poly-low
- Page: https://codels.download/models/cardboard-box

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `count` | int | 1 – 3 | 2 | 2 |
| `open` | boolean | true \| false | true | true |
| `size` | number | 0.5 – 1.6 | 1 | 1 |
| `color` | color | #rrggbb | #c49a63 | #c49a63 |

## Parts

- boxes (group)
  - box1 (group)
    - body (box · card)
    - flapSeam (box · edge)
    - tapeTop (box · tape)
    - tapeEnd (box · tape)
    - tapeEnd (box · tape)
    - tapeEnd (box · tape)
    - tapeEnd (box · tape)
    - shippingLabel (box · label)
    - labelText (box · ink)
    - labelText (box · ink)
    - labelText (box · ink)
    - labelText (box · ink)
    - barcode (box · ink)
    - upArrow (extrude · ink)
    - upArrow (extrude · ink)
  - box2 (group)
    - bottom (box · card)
    - innerFloor (box · inner)
    - wallFront (box · card)
    - wallRight (box · card)
    - innerWall (box · inner)
    - innerWall (box · inner)
    - wallBack (box · card)
    - wallLeft (box · card)
    - innerWall (box · inner)
    - innerWall (box · inner)
    - flapFront (group)
      - flap (box · card)
      - flapInside (box · inner)
    - flapBack (group)
      - flap (box · card)
      - flapInside (box · inner)
    - flapRight (group)
      - flap (box · card)
      - flapInside (box · inner)
    - flapLeft (group)
      - flap (box · card)
      - flapInside (box · inner)

## How to use

Save the code below as `cardboard-box.js`, then:

```js
import { createCardboardBox } from './cardboard-box.js';
const model = createCardboardBox();
scene.add(model);
```

## Code

```js
/**
 * Cardboard Box — Codels 3D model library (https://codels.download/models/cardboard-box)
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
 * Triangles: 564 · Size (W × H × D): 0.66 × 0.69 × 0.57 m
 *
 * Usage:
 *   import { createCardboardBox } from './cardboard-box.js';
 *   
 *   const model = createCardboardBox();
 *   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 createCardboardBox() {
  const root = new THREE.Group();
  root.name = 'CardboardBox';

  // Materials
  const cardMat = new THREE.MeshStandardMaterial({ name: 'card', color: 0xc49a63, roughness: 0.95, flatShading: true });
  const innerMat = new THREE.MeshStandardMaterial({ name: 'inner', color: 0x7a5f3d, roughness: 1, flatShading: true });
  const edgeMat = new THREE.MeshStandardMaterial({ name: 'edge', color: 0xa78354, roughness: 0.95, flatShading: true });
  const tapeMat = new THREE.MeshStandardMaterial({ name: 'tape', color: 0xdcbe88, roughness: 0.35, flatShading: true });
  const labelMat = new THREE.MeshStandardMaterial({ name: 'label', color: 0xf4f2ec, roughness: 0.8, flatShading: true });
  const inkMat = new THREE.MeshStandardMaterial({ name: 'ink', color: 0x3a3532, roughness: 0.9, flatShading: true });

  // Shared geometries
  const boxGeo = new THREE.BoxGeometry(0.0015, 0.07, 0.05);
  const boxGeo2 = new THREE.BoxGeometry(0.0015, 0.05, 0.05);
  const extrudeGeo = extrude([[-0.008, -0.03], [0.008, -0.03], [0.008, 0.005], [0.02, 0.005], [0, 0.03], [-0.02, 0.005], [-0.008, 0.005]], 0.002);
  const boxGeo3 = new THREE.BoxGeometry(0.3864, 0.2529, 0.006);
  const boxGeo4 = new THREE.BoxGeometry(0.006, 0.2529, 0.3011);
  const boxGeo5 = new THREE.BoxGeometry(0.3744, 0.2469, 0.002);
  const boxGeo6 = new THREE.BoxGeometry(0.002, 0.2469, 0.2971);
  const boxGeo7 = new THREE.BoxGeometry(0.3864, 0.1565, 0.006);
  const boxGeo8 = new THREE.BoxGeometry(0.3764, 0.1505, 0.002);
  const boxGeo9 = new THREE.BoxGeometry(0.006, 0.1565, 0.3011);
  const boxGeo10 = new THREE.BoxGeometry(0.002, 0.1505, 0.2911);
  const boxGeo11 = new THREE.BoxGeometry(0.05, 0.05, 0.0015);

  // Parts
  const boxes = new THREE.Group();
  boxes.name = 'boxes';
  root.add(boxes);
  const box1 = new THREE.Group();
  box1.name = 'box1';
  boxes.add(box1);
  const body = new THREE.Mesh(new THREE.BoxGeometry(0.4658, 0.3043, 0.3503), cardMat);
  body.name = 'body';
  body.position.set(0, 0.1522, 0);
  box1.add(body);
  const flapSeam = new THREE.Mesh(new THREE.BoxGeometry(0.4558, 0.002, 0.004), edgeMat);
  flapSeam.name = 'flapSeam';
  flapSeam.position.set(0, 0.3053, 0);
  box1.add(flapSeam);
  const tapeTop = new THREE.Mesh(new THREE.BoxGeometry(0.4688, 0.0015, 0.05), tapeMat);
  tapeTop.name = 'tapeTop';
  tapeTop.position.set(0, 0.305, 0);
  box1.add(tapeTop);
  const tapeEnd = new THREE.Mesh(boxGeo, tapeMat);
  tapeEnd.name = 'tapeEnd';
  tapeEnd.position.set(0.2337, 0.2693, 0);
  box1.add(tapeEnd);
  const tapeEnd2 = new THREE.Mesh(boxGeo, tapeMat);
  tapeEnd2.name = 'tapeEnd';
  tapeEnd2.position.set(-0.2337, 0.2693, 0);
  box1.add(tapeEnd2);
  const tapeEnd3 = new THREE.Mesh(boxGeo2, tapeMat);
  tapeEnd3.name = 'tapeEnd';
  tapeEnd3.position.set(0.2337, 0.025, 0);
  box1.add(tapeEnd3);
  const tapeEnd4 = new THREE.Mesh(boxGeo2, tapeMat);
  tapeEnd4.name = 'tapeEnd';
  tapeEnd4.position.set(-0.2337, 0.025, 0);
  box1.add(tapeEnd4);
  const shippingLabel = new THREE.Mesh(new THREE.BoxGeometry(0.1397, 0.0791, 0.002), labelMat);
  shippingLabel.name = 'shippingLabel';
  shippingLabel.position.set(0.0838, 0.1521, 0.1762);
  box1.add(shippingLabel);
  const labelText = new THREE.Mesh(new THREE.BoxGeometry(0.0745, 0.006, 0.002), inkMat);
  labelText.name = 'labelText';
  labelText.position.set(0.0606, 0.1734, 0.1772);
  box1.add(labelText);
  const labelText2 = new THREE.Mesh(new THREE.BoxGeometry(0.0522, 0.006, 0.002), inkMat);
  labelText2.name = 'labelText';
  labelText2.position.set(0.0494, 0.1597, 0.1772);
  box1.add(labelText2);
  const labelText3 = new THREE.Mesh(new THREE.BoxGeometry(0.0633, 0.006, 0.002), inkMat);
  labelText3.name = 'labelText';
  labelText3.position.set(0.055, 0.146, 0.1772);
  box1.add(labelText3);
  const labelText4 = new THREE.Mesh(new THREE.BoxGeometry(0.0373, 0.006, 0.002), inkMat);
  labelText4.name = 'labelText';
  labelText4.position.set(0.0419, 0.1324, 0.1772);
  box1.add(labelText4);
  const barcode = new THREE.Mesh(new THREE.BoxGeometry(0.0326, 0.0548, 0.002), inkMat);
  barcode.name = 'barcode';
  barcode.position.set(0.1258, 0.1521, 0.1772);
  box1.add(barcode);
  const upArrow = new THREE.Mesh(extrudeGeo, inkMat);
  upArrow.name = 'upArrow';
  upArrow.position.set(0.2339, 0.2191, -0.03);
  upArrow.rotation.set(0, deg(90), 0);
  box1.add(upArrow);
  const upArrow2 = new THREE.Mesh(extrudeGeo, inkMat);
  upArrow2.name = 'upArrow';
  upArrow2.position.set(0.2339, 0.2191, 0.03);
  upArrow2.rotation.set(0, deg(90), 0);
  box1.add(upArrow2);
  const box2 = new THREE.Group();
  box2.name = 'box2';
  box2.position.set(-0.0003, 0.3043, -0.0075);
  box2.rotation.set(0, deg(5.4241), 0);
  boxes.add(box2);
  const bottom = new THREE.Mesh(new THREE.BoxGeometry(0.3864, 0.006, 0.3131), cardMat);
  bottom.name = 'bottom';
  bottom.position.set(0, 0.003, 0);
  box2.add(bottom);
  const innerFloor = new THREE.Mesh(new THREE.BoxGeometry(0.3744, 0.002, 0.3011), innerMat);
  innerFloor.name = 'innerFloor';
  innerFloor.position.set(0, 0.007, 0);
  box2.add(innerFloor);
  const wallFront = new THREE.Mesh(boxGeo3, cardMat);
  wallFront.name = 'wallFront';
  wallFront.position.set(0, 0.1265, 0.1535);
  box2.add(wallFront);
  const wallRight = new THREE.Mesh(boxGeo4, cardMat);
  wallRight.name = 'wallRight';
  wallRight.position.set(0.1902, 0.1265, 0);
  box2.add(wallRight);
  const innerWall = new THREE.Mesh(boxGeo5, innerMat);
  innerWall.name = 'innerWall';
  innerWall.position.set(0, 0.1295, 0.1495);
  box2.add(innerWall);
  const innerWall2 = new THREE.Mesh(boxGeo6, innerMat);
  innerWall2.name = 'innerWall';
  innerWall2.position.set(0.1862, 0.1295, 0);
  box2.add(innerWall2);
  const wallBack = new THREE.Mesh(boxGeo3, cardMat);
  wallBack.name = 'wallBack';
  wallBack.position.set(0, 0.1265, -0.1535);
  box2.add(wallBack);
  const wallLeft = new THREE.Mesh(boxGeo4, cardMat);
  wallLeft.name = 'wallLeft';
  wallLeft.position.set(-0.1902, 0.1265, 0);
  box2.add(wallLeft);
  const innerWall3 = new THREE.Mesh(boxGeo5, innerMat);
  innerWall3.name = 'innerWall';
  innerWall3.position.set(0, 0.1295, -0.1495);
  box2.add(innerWall3);
  const innerWall4 = new THREE.Mesh(boxGeo6, innerMat);
  innerWall4.name = 'innerWall';
  innerWall4.position.set(-0.1862, 0.1295, 0);
  box2.add(innerWall4);
  const flapFront = new THREE.Group();
  flapFront.name = 'flapFront';
  flapFront.position.set(0, 0.2529, 0.1535);
  flapFront.rotation.set(deg(58), 0, 0);
  box2.add(flapFront);
  const flap = new THREE.Mesh(boxGeo7, cardMat);
  flap.name = 'flap';
  flap.position.set(0, 0.0783, 0);
  flapFront.add(flap);
  const flapInside = new THREE.Mesh(boxGeo8, innerMat);
  flapInside.name = 'flapInside';
  flapInside.position.set(0, 0.0783, -0.004);
  flapFront.add(flapInside);
  const flapBack = new THREE.Group();
  flapBack.name = 'flapBack';
  flapBack.position.set(0, 0.2529, -0.1535);
  flapBack.rotation.set(deg(-34), 0, 0);
  box2.add(flapBack);
  const flap2 = new THREE.Mesh(boxGeo7, cardMat);
  flap2.name = 'flap';
  flap2.position.set(0, 0.0783, 0);
  flapBack.add(flap2);
  const flapInside2 = new THREE.Mesh(boxGeo8, innerMat);
  flapInside2.name = 'flapInside';
  flapInside2.position.set(0, 0.0783, 0.004);
  flapBack.add(flapInside2);
  const flapRight = new THREE.Group();
  flapRight.name = 'flapRight';
  flapRight.position.set(0.1902, 0.2529, 0);
  flapRight.rotation.set(0, 0, deg(-66));
  box2.add(flapRight);
  const flap3 = new THREE.Mesh(boxGeo9, cardMat);
  flap3.name = 'flap';
  flap3.position.set(0, 0.0783, 0);
  flapRight.add(flap3);
  const flapInside3 = new THREE.Mesh(boxGeo10, innerMat);
  flapInside3.name = 'flapInside';
  flapInside3.position.set(-0.004, 0.0783, 0);
  flapRight.add(flapInside3);
  const flapLeft = new THREE.Group();
  flapLeft.name = 'flapLeft';
  flapLeft.position.set(-0.1902, 0.2529, 0);
  flapLeft.rotation.set(0, 0, deg(42));
  box2.add(flapLeft);
  const flap4 = new THREE.Mesh(boxGeo9, cardMat);
  flap4.name = 'flap';
  flap4.position.set(0, 0.0783, 0);
  flapLeft.add(flap4);
  const flapInside4 = new THREE.Mesh(boxGeo10, innerMat);
  flapInside4.name = 'flapInside';
  flapInside4.position.set(0.004, 0.0783, 0);
  flapLeft.add(flapInside4);
  const cutTape = new THREE.Mesh(boxGeo11, tapeMat);
  cutTape.name = 'cutTape';
  cutTape.position.set(0, 0.2279, 0.1573);
  box2.add(cutTape);
  const cutTape2 = new THREE.Mesh(boxGeo11, tapeMat);
  cutTape2.name = 'cutTape';
  cutTape2.position.set(0, 0.2279, -0.1573);
  box2.add(cutTape2);
  const shippingLabel2 = new THREE.Mesh(new THREE.BoxGeometry(0.1159, 0.0658, 0.002), labelMat);
  shippingLabel2.name = 'shippingLabel';
  shippingLabel2.position.set(0.0696, 0.1265, 0.1575);
  box2.add(shippingLabel2);
  const labelText5 = new THREE.Mesh(new THREE.BoxGeometry(0.0618, 0.006, 0.002), inkMat);
  labelText5.name = 'labelText';
  labelText5.position.set(0.0502, 0.1442, 0.1585);
  box2.add(labelText5);
  const labelText6 = new THREE.Mesh(new THREE.BoxGeometry(0.0433, 0.006, 0.002), inkMat);
  labelText6.name = 'labelText';
  labelText6.position.set(0.041, 0.1328, 0.1585);
  box2.add(labelText6);
  const labelText7 = new THREE.Mesh(new THREE.BoxGeometry(0.0526, 0.006, 0.002), inkMat);
  labelText7.name = 'labelText';
  labelText7.position.set(0.0456, 0.1214, 0.1585);
  box2.add(labelText7);
  const labelText8 = new THREE.Mesh(new THREE.BoxGeometry(0.0309, 0.006, 0.002), inkMat);
  labelText8.name = 'labelText';
  labelText8.position.set(0.0348, 0.11, 0.1585);
  box2.add(labelText8);
  const barcode2 = new THREE.Mesh(new THREE.BoxGeometry(0.0271, 0.0455, 0.002), inkMat);
  barcode2.name = 'barcode';
  barcode2.position.set(0.1043, 0.1265, 0.1585);
  box2.add(barcode2);
  const upArrow3 = new THREE.Mesh(extrudeGeo, inkMat);
  upArrow3.name = 'upArrow';
  upArrow3.position.set(0.1942, 0.1821, -0.0268);
  upArrow3.rotation.set(0, deg(90), 0);
  box2.add(upArrow3);
  const upArrow4 = new THREE.Mesh(extrudeGeo, inkMat);
  upArrow4.name = 'upArrow';
  upArrow4.position.set(0.1942, 0.1821, 0.0268);
  upArrow4.rotation.set(0, deg(90), 0);
  box2.add(upArrow4);

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

export default createCardboardBox;
```

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