# Orange

> A fresh low-poly orange with a dimpled glossy peel, a little green stem button and a leaf — or cut in two, showing a white pith ring, ten juicy segments and a pale core on each half. Real-world size (about 8 cm across), scalable for giant pickups; recolor the peel for lemons, limes or grapefruit in kitchens, markets and farm games.

![Orange preview](https://codels.download/m/orange.png)

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

## Facts

- Category: Food & Drink › Fruits & Vegetables
- Size (W × H × D): 0.08 × 0.10 × 0.08 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 448 · Meshes: 4 · Materials: 3
- License: CC0-1.0 (Codels built-in)
- Tags: citrus, fruit, cartoon, low-poly, stylized, farm, kitchen, summer, tropical, farming-sim, survival, collectible, food, pickup, prop, organic, round, game-ready, instancing-friendly, mobile-friendly, parametric, color-orange, size-tiny, poly-low
- Page: https://codels.download/models/orange

## Files

| Format | URL |
|---|---|
| three.js ES module (`createOrange()`) | https://codels.download/m/orange.js |
| React Three Fiber component (`<Orange />`) | https://codels.download/m/orange.jsx |
| Instancing module (`createOrangeInstances(count, place)`, one draw call per material) | https://codels.download/m/orange.instanced.js |
| Standalone HTML demo | https://codels.download/m/orange.html |
| glTF binary | https://codels.download/m/orange.glb |
| glTF binary, Meshopt-compressed (2–3× smaller; GLTFLoader needs `setMeshoptDecoder(MeshoptDecoder)`) | https://codels.download/m/orange.glb?compress=meshopt |
| glTF JSON | https://codels.download/m/orange.gltf |
| OBJ (vertex colors) + MTL | https://codels.download/m/orange.obj · https://codels.download/m/orange.mtl |
| STL | https://codels.download/m/orange.stl |
| CodelSpec JSON | https://codels.download/m/orange.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 | whole \| halved | whole | whole |
| `color` | color | #rrggbb | #f27a14 | #f27a14 |
| `size` | number | 0.04 – 0.4 | 0.08 | 0.08 |
| `leaf` | boolean | true \| false | true | true |

## Parts

- orange (group)
  - peel (sphere · peel)
  - stemButton (cylinder · stem)
  - stem (cylinder · stem)
  - leaf (extrude · leaf)

## How to use

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

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

## Code

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

const deg = THREE.MathUtils.degToRad;

// Deterministic vertex displacement (organic low-poly look).
function jitter(geometry, amount, seed) {
  const pos = geometry.attributes.position;
  const h = (a, b, c, s) => {
    let x = Math.imul(a, 73856093) ^ Math.imul(b, 19349663) ^ Math.imul(c, 83492791) ^ Math.imul(s, 2654435761);
    x = Math.imul(x ^ (x >>> 16), 2246822507);
    x = Math.imul(x ^ (x >>> 13), 3266489909);
    return ((x ^ (x >>> 16)) >>> 0) / 4294967295 - 0.5;
  };
  for (let i = 0; i < pos.count; i++) {
    const x = pos.getX(i), y = pos.getY(i), z = pos.getZ(i);
    const qx = Math.round(x * 1000), qy = Math.round(y * 1000), qz = Math.round(z * 1000);
    pos.setXYZ(i, x + h(qx, qy, qz, seed) * 2 * amount, y + h(qx, qy, qz, seed + 1) * 2 * amount, z + h(qx, qy, qz, seed + 2) * 2 * amount);
  }
  pos.needsUpdate = true;
  geometry.computeVertexNormals();
  return geometry;
}

// 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 createOrange() {
  const root = new THREE.Group();
  root.name = 'Orange';

  // Materials
  const peelMat = new THREE.MeshStandardMaterial({ name: 'peel', color: 0xf27a14, roughness: 0.55 });
  const stemMat = new THREE.MeshStandardMaterial({ name: 'stem', color: 0x5d7a2a, roughness: 0.8, flatShading: true });
  const leafMat = new THREE.MeshStandardMaterial({ name: 'leaf', color: 0x3f8a2c, roughness: 0.65, flatShading: true });

  // Parts
  const orange = new THREE.Group();
  orange.name = 'orange';
  orange.scale.setScalar(0.08);
  root.add(orange);
  const peel = new THREE.Mesh(jitter(new THREE.SphereGeometry(0.5, 16, 12), 0.008, 5), peelMat);
  peel.name = 'peel';
  peel.position.set(0, 0.47, 0);
  peel.scale.set(1, 0.94, 1);
  orange.add(peel);
  const stemButton = new THREE.Mesh(new THREE.CylinderGeometry(0.045, 0.06, 0.03, 6), stemMat);
  stemButton.name = 'stemButton';
  stemButton.position.set(0, 0.943, 0);
  orange.add(stemButton);
  const stem = new THREE.Mesh(new THREE.CylinderGeometry(0.014, 0.018, 0.06, 5), stemMat);
  stem.name = 'stem';
  stem.position.set(0.004, 0.98, 0);
  stem.rotation.set(0, 0, deg(-12));
  orange.add(stem);
  const leaf = new THREE.Mesh(extrude([[0, 0], [0.06, 0.0667], [0.12, 0.1068], [0.18, 0.1274], [0.24, 0.1274], [0.3, 0.1068], [0.36, 0.0667], [0.42, 0], [0.36, -0.0667], [0.3, -0.1068], [0.24, -0.1274], [0.18, -0.1274], [0.12, -0.1068], [0.06, -0.0667]], 0.014), leafMat);
  leaf.name = 'leaf';
  leaf.position.set(0.03, 0.97, 0.01);
  leaf.rotation.set(deg(68.6623), deg(32.2205), deg(36.229));
  orange.add(leaf);

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

export default createOrange;
```

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