# Potted Plant

> A cheerful low-poly houseplant in a terracotta pot with a rolled rim and dark soil. Choose a round leafy bush, a tall snake plant with upright blade leaves, or a rosette succulent in a shallow bowl, and recolor the pot and foliage. Easy set dressing for homes, offices, shops, cafes and balconies.

![Potted Plant preview](https://codels.download/m/potted-plant.png)

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

## Facts

- Category: Props › Decor
- Size (W × H × D): 0.45 × 0.73 × 0.46 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 868 · Meshes: 11 · Materials: 7
- License: CC0-1.0 (Codels built-in)
- Tags: flower-pot, plant, potted-plant, succulent, cartoon, low-poly, stylized, modern, office, garden, interior, city-builder, decoration, prop, vegetation, ceramic, foliage-material, instancing-friendly, mobile-friendly, parametric, color-green, color-orange, size-small, poly-low
- Page: https://codels.download/models/potted-plant

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `plant` | select | round \| tall \| succulent | round | round |
| `pot` | color | #rrggbb | #c0653d | #c0653d |
| `leaf` | color | #rrggbb | #3f7f39 | #3f7f39 |

## Parts

- pot (lathe · pot)
- soil (cylinder · soil)
- foot (cylinder · potDark)
- stem (cylinder · stem)
- foliage (icosahedron · leaf)
- foliage (icosahedron · leafDark)
- foliage (icosahedron · leafLight)
- foliage (icosahedron · leaf)
- foliage (icosahedron · leafDark)
- foliage (icosahedron · leafLight)
- foliage (icosahedron · leaf)

## How to use

Save the code below as `potted-plant.js`, then:

```js
import { createPottedPlant } from './potted-plant.js';
const model = createPottedPlant();
scene.add(model);
```

## Code

```js
/**
 * Potted Plant — Codels 3D model library (https://codels.download/models/potted-plant)
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
 * Triangles: 868 · Size (W × H × D): 0.45 × 0.73 × 0.46 m
 *
 * Usage:
 *   import { createPottedPlant } from './potted-plant.js';
 *   
 *   const model = createPottedPlant();
 *   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;
}

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

  // Materials
  const potMat = new THREE.MeshStandardMaterial({ name: 'pot', color: 0xc0653d, roughness: 0.85, flatShading: true });
  const potDarkMat = new THREE.MeshStandardMaterial({ name: 'potDark', color: 0x9a5131, roughness: 0.85, flatShading: true });
  const soilMat = new THREE.MeshStandardMaterial({ name: 'soil', color: 0x3b2a1e, roughness: 1, flatShading: true });
  const leafMat = new THREE.MeshStandardMaterial({ name: 'leaf', color: 0x3f7f39, roughness: 0.75, flatShading: true });
  const leafLightMat = new THREE.MeshStandardMaterial({ name: 'leafLight', color: 0x489242, roughness: 0.75, flatShading: true });
  const leafDarkMat = new THREE.MeshStandardMaterial({ name: 'leafDark', color: 0x2f5f2b, roughness: 0.8, flatShading: true });
  const stemMat = new THREE.MeshStandardMaterial({ name: 'stem', color: 0x5b4128, roughness: 0.9, flatShading: true });

  // Parts
  const pot = new THREE.Mesh(lathe([[0, 0], [0.095, 0], [0.1, 0.01], [0.128, 0.2], [0.15, 0.205], [0.153, 0.25], [0.137, 0.254], [0.133, 0.22], [0, 0.22]], 12), potMat);
  pot.name = 'pot';
  root.add(pot);
  const soil = new THREE.Mesh(new THREE.CylinderGeometry(0.134, 0.134, 0.012, 12), soilMat);
  soil.name = 'soil';
  soil.position.set(0, 0.218, 0);
  root.add(soil);
  const foot = new THREE.Mesh(new THREE.CylinderGeometry(0.099, 0.099, 0.012, 12), potDarkMat);
  foot.name = 'foot';
  foot.position.set(0, 0.006, 0);
  root.add(foot);
  const stem = new THREE.Mesh(new THREE.CylinderGeometry(0.016, 0.022, 0.2, 5), stemMat);
  stem.name = 'stem';
  stem.position.set(0, 0.32, 0);
  root.add(stem);
  const foliage = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.17, 1), 0.017, 1), leafMat);
  foliage.name = 'foliage';
  foliage.position.set(0, 0.52, 0);
  foliage.rotation.set(deg(26.8588), deg(23.4321), 0);
  root.add(foliage);
  const foliage2 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.12, 1), 0.012, 2), leafDarkMat);
  foliage2.name = 'foliage';
  foliage2.position.set(0.11, 0.48, 0.05);
  foliage2.rotation.set(deg(43.0307), deg(12.4737), 0);
  root.add(foliage2);
  const foliage3 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.12, 1), 0.012, 3), leafLightMat);
  foliage3.name = 'foliage';
  foliage3.position.set(-0.1, 0.49, 0.06);
  foliage3.rotation.set(deg(38.6482), deg(23.0628), 0);
  root.add(foliage3);
  const foliage4 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.12, 1), 0.012, 4), leafMat);
  foliage4.name = 'foliage';
  foliage4.position.set(0.02, 0.47, -0.11);
  foliage4.rotation.set(deg(22.2623), deg(4.5153), 0);
  root.add(foliage4);
  const foliage5 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.11, 1), 0.011, 5), leafDarkMat);
  foliage5.name = 'foliage';
  foliage5.position.set(0.05, 0.62, 0.03);
  foliage5.rotation.set(deg(37.778), deg(48.0961), 0);
  root.add(foliage5);
  const foliage6 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.1, 1), 0.01, 6), leafLightMat);
  foliage6.name = 'foliage';
  foliage6.position.set(-0.06, 0.59, -0.05);
  foliage6.rotation.set(deg(54.1093), deg(44.0605), 0);
  root.add(foliage6);
  const foliage7 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.1, 1), 0.01, 7), leafMat);
  foliage7.name = 'foliage';
  foliage7.position.set(0, 0.5, 0.13);
  foliage7.rotation.set(deg(43.929), deg(23.0602), 0);
  root.add(foliage7);

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

export default createPottedPlant;
```

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