# Autumn Tree

> A cute stylized lollipop tree with a faceted round or teardrop crown in warm orange, red and gold, accented by smaller leaf clusters and an optional ring of fallen leaves. Switch the season to lush summer green or pink cherry blossom for parks, cozy villages and seasonal levels.

![Autumn Tree preview](https://codels.download/m/autumn-tree.png)

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

## Facts

- Category: Nature › Trees
- Size (W × H × D): 2.61 × 4.46 × 2.53 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 980 · Meshes: 27 · Materials: 4
- License: CC0-1.0 (Codels built-in)
- Tags: cherry-blossom, tree, cartoon, low-poly, stylized, autumn, japanese, forest, garden, village, city-builder, farming-sim, party-game, background, decoration, vegetation, foliage-material, round, mobile-friendly, parametric, color-orange, size-large, poly-low
- Page: https://codels.download/models/autumn-tree

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `season` | select | autumn \| summer \| cherry-blossom | autumn | autumn |
| `shape` | select | teardrop \| round | teardrop | teardrop |
| `height` | number | 2.5 – 7 | 4.5 | 4.5 |
| `litter` | boolean | true \| false | true | true |

## Parts

- trunk (cylinder · bark)
- rootFlare (cylinder · bark)
- branch1 (cylinder · bark)
- branch2 (cylinder · bark)
- crown (lathe · leaf)
- cluster1 (icosahedron · leaf)
- cluster2 (icosahedron · leaf2)
- cluster3 (icosahedron · leaf)
- cluster4 (icosahedron · leaf2)
- cluster5 (icosahedron · leaf)
- cluster6 (icosahedron · leaf3)
- cluster7 (icosahedron · leaf)
- cluster8 (icosahedron · leaf3)
- fallenLeaf1 (octahedron · leaf)
- fallenLeaf2 (octahedron · leaf)
- fallenLeaf3 (octahedron · leaf2)
- fallenLeaf4 (octahedron · leaf2)
- fallenLeaf5 (octahedron · leaf)
- fallenLeaf6 (octahedron · leaf2)
- fallenLeaf7 (octahedron · leaf3)
- fallenLeaf8 (octahedron · leaf)
- fallenLeaf9 (octahedron · leaf2)
- fallenLeaf10 (octahedron · leaf3)
- fallenLeaf11 (octahedron · leaf)
- fallenLeaf12 (octahedron · leaf2)
- fallenLeaf13 (octahedron · leaf2)
- fallenLeaf14 (octahedron · leaf)

## How to use

Save the code below as `autumn-tree.js`, then:

```js
import { createAutumnTree } from './autumn-tree.js';
const model = createAutumnTree();
scene.add(model);
```

## Code

```js
/**
 * Autumn Tree — Codels 3D model library (https://codels.download/models/autumn-tree)
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
 * Triangles: 980 · Size (W × H × D): 2.61 × 4.46 × 2.53 m
 *
 * Usage:
 *   import { createAutumnTree } from './autumn-tree.js';
 *   
 *   const model = createAutumnTree();
 *   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 createAutumnTree() {
  const root = new THREE.Group();
  root.name = 'AutumnTree';

  // Materials
  const barkMat = new THREE.MeshStandardMaterial({ name: 'bark', color: 0x6b4a33, roughness: 0.95, flatShading: true });
  const leafMat = new THREE.MeshStandardMaterial({ name: 'leaf', color: 0xdd6b2a, roughness: 0.8, flatShading: true });
  const leaf2Mat = new THREE.MeshStandardMaterial({ name: 'leaf2', color: 0xc94a2a, roughness: 0.8, flatShading: true });
  const leaf3Mat = new THREE.MeshStandardMaterial({ name: 'leaf3', color: 0xeb9a36, roughness: 0.8, flatShading: true });

  // Shared geometries
  const cylinderGeo = new THREE.CylinderGeometry(0.0473, 0.0866, 0.908, 5);
  const octahedronGeo = new THREE.OctahedronGeometry(1, 0);

  // Parts
  const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.1103, 0.1575, 2.6775, 6), barkMat);
  trunk.name = 'trunk';
  trunk.position.set(0, 1.3388, 0);
  root.add(trunk);
  const rootFlare = new THREE.Mesh(new THREE.CylinderGeometry(0.1654, 0.2363, 0.225, 6), barkMat);
  rootFlare.name = 'rootFlare';
  rootFlare.position.set(0, 0.1125, 0);
  root.add(rootFlare);
  const branch1 = new THREE.Mesh(cylinderGeo, barkMat);
  branch1.name = 'branch1';
  branch1.position.set(0.2331, 1.9631, 0.0986);
  branch1.rotation.set(deg(12.5638), deg(-3.4929), deg(-30.964));
  root.add(branch1);
  const branch2 = new THREE.Mesh(cylinderGeo, barkMat);
  branch2.name = 'branch2';
  branch2.position.set(-0.237, 1.9631, -0.0888);
  branch2.rotation.set(deg(-11.2965), deg(-3.1987), deg(31.5298));
  root.add(branch2);
  const crown = new THREE.Mesh(jitter(lathe([[0, 0], [0.6188, 0.0675], [1.0125, 0.3825], [1.125, 0.81], [1.035, 1.26], [0.765, 1.7438], [0.3825, 2.16], [0, 2.385]], 10), 0.0506, 11), leafMat);
  crown.name = 'crown';
  crown.position.set(0, 2.115, 0);
  root.add(crown);
  const cluster1 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.5795, 1), 0.0348, 20), leafMat);
  cluster1.name = 'cluster1';
  cluster1.position.set(0.6953, 2.8121, -0.1977);
  cluster1.rotation.set(deg(56.7534), deg(123.3357), 0);
  cluster1.scale.set(1, 0.85, 1);
  root.add(cluster1);
  const cluster2 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.563, 1), 0.0338, 21), leaf2Mat);
  cluster2.name = 'cluster2';
  cluster2.position.set(0.109, 2.5958, 0.6766);
  cluster2.rotation.set(deg(4.4434), deg(21.9445), 0);
  cluster2.scale.set(1, 0.85, 1);
  root.add(cluster2);
  const cluster3 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.5793, 1), 0.0348, 22), leafMat);
  cluster3.name = 'cluster3';
  cluster3.position.set(-0.4141, 2.6151, 0.5503);
  cluster3.rotation.set(deg(41.1825), deg(277.6117), 0);
  cluster3.scale.set(1, 0.85, 1);
  root.add(cluster3);
  const cluster4 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.5972, 1), 0.0358, 23), leaf2Mat);
  cluster4.name = 'cluster4';
  cluster4.position.set(-0.7083, 2.7465, -0.0678);
  cluster4.rotation.set(deg(59.8818), deg(101.8528), 0);
  cluster4.scale.set(1, 0.85, 1);
  root.add(cluster4);
  const cluster5 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.4692, 1), 0.0282, 24), leafMat);
  cluster5.name = 'cluster5';
  cluster5.position.set(0.0911, 3.3889, -0.6718);
  cluster5.rotation.set(deg(5.6009), deg(206.4213), 0);
  cluster5.scale.set(1, 0.85, 1);
  root.add(cluster5);
  const cluster6 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.4542, 1), 0.0273, 25), leaf3Mat);
  cluster6.name = 'cluster6';
  cluster6.position.set(0.6616, 3.2688, -0.2197);
  cluster6.rotation.set(deg(69.1208), deg(4.3349), 0);
  cluster6.scale.set(1, 0.85, 1);
  root.add(cluster6);
  const cluster7 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.4509, 1), 0.0271, 26), leafMat);
  cluster7.name = 'cluster7';
  cluster7.position.set(0.338, 3.304, 0.6044);
  cluster7.rotation.set(deg(88.2688), deg(309.6704), 0);
  cluster7.scale.set(1, 0.85, 1);
  root.add(cluster7);
  const cluster8 = new THREE.Mesh(jitter(new THREE.IcosahedronGeometry(0.4722, 1), 0.0283, 27), leaf3Mat);
  cluster8.name = 'cluster8';
  cluster8.position.set(-0.3798, 3.418, 0.5486);
  cluster8.rotation.set(deg(87.797), deg(55.6761), 0);
  cluster8.scale.set(1, 0.85, 1);
  root.add(cluster8);
  const fallenLeaf1 = new THREE.Mesh(octahedronGeo, leafMat);
  fallenLeaf1.name = 'fallenLeaf1';
  fallenLeaf1.position.set(0.4464, 0.0162, 0.0767);
  fallenLeaf1.rotation.set(0, deg(9.3274), 0);
  fallenLeaf1.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf1);
  const fallenLeaf2 = new THREE.Mesh(octahedronGeo, leafMat);
  fallenLeaf2.name = 'fallenLeaf2';
  fallenLeaf2.position.set(-0.3134, 0.0162, -0.6016);
  fallenLeaf2.rotation.set(0, deg(57.3886), 0);
  fallenLeaf2.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf2);
  const fallenLeaf3 = new THREE.Mesh(octahedronGeo, leaf2Mat);
  fallenLeaf3.name = 'fallenLeaf3';
  fallenLeaf3.position.set(0.4279, 0.0162, -0.4869);
  fallenLeaf3.rotation.set(0, deg(92.2871), 0);
  fallenLeaf3.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf3);
  const fallenLeaf4 = new THREE.Mesh(octahedronGeo, leaf2Mat);
  fallenLeaf4.name = 'fallenLeaf4';
  fallenLeaf4.position.set(0.498, 0.0162, -0.3919);
  fallenLeaf4.rotation.set(0, deg(86.3084), 0);
  fallenLeaf4.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf4);
  const fallenLeaf5 = new THREE.Mesh(octahedronGeo, leafMat);
  fallenLeaf5.name = 'fallenLeaf5';
  fallenLeaf5.position.set(0.3012, 0.0162, -0.595);
  fallenLeaf5.rotation.set(0, deg(142.4779), 0);
  fallenLeaf5.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf5);
  const fallenLeaf6 = new THREE.Mesh(octahedronGeo, leaf2Mat);
  fallenLeaf6.name = 'fallenLeaf6';
  fallenLeaf6.position.set(-0.2433, 0.0162, -1.1907);
  fallenLeaf6.rotation.set(0, deg(1.8532), 0);
  fallenLeaf6.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf6);
  const fallenLeaf7 = new THREE.Mesh(octahedronGeo, leaf3Mat);
  fallenLeaf7.name = 'fallenLeaf7';
  fallenLeaf7.position.set(-0.0413, 0.0162, 0.3091);
  fallenLeaf7.rotation.set(0, deg(19.2708), 0);
  fallenLeaf7.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf7);
  const fallenLeaf8 = new THREE.Mesh(octahedronGeo, leafMat);
  fallenLeaf8.name = 'fallenLeaf8';
  fallenLeaf8.position.set(0.3273, 0.0162, 0.0076);
  fallenLeaf8.rotation.set(0, deg(18.1605), 0);
  fallenLeaf8.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf8);
  const fallenLeaf9 = new THREE.Mesh(octahedronGeo, leaf2Mat);
  fallenLeaf9.name = 'fallenLeaf9';
  fallenLeaf9.position.set(0.2858, 0.0162, -0.1831);
  fallenLeaf9.rotation.set(0, deg(62.3078), 0);
  fallenLeaf9.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf9);
  const fallenLeaf10 = new THREE.Mesh(octahedronGeo, leaf3Mat);
  fallenLeaf10.name = 'fallenLeaf10';
  fallenLeaf10.position.set(1.1865, 0.0162, -0.333);
  fallenLeaf10.rotation.set(0, deg(168.3333), 0);
  fallenLeaf10.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf10);
  const fallenLeaf11 = new THREE.Mesh(octahedronGeo, leafMat);
  fallenLeaf11.name = 'fallenLeaf11';
  fallenLeaf11.position.set(0.3608, 0.0162, -0.3243);
  fallenLeaf11.rotation.set(0, deg(166.2828), 0);
  fallenLeaf11.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf11);
  const fallenLeaf12 = new THREE.Mesh(octahedronGeo, leaf2Mat);
  fallenLeaf12.name = 'fallenLeaf12';
  fallenLeaf12.position.set(0.038, 0.0162, -0.5492);
  fallenLeaf12.rotation.set(0, deg(74.6194), 0);
  fallenLeaf12.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf12);
  const fallenLeaf13 = new THREE.Mesh(octahedronGeo, leaf2Mat);
  fallenLeaf13.name = 'fallenLeaf13';
  fallenLeaf13.position.set(0.7783, 0.0162, -0.3986);
  fallenLeaf13.rotation.set(0, deg(142.3566), 0);
  fallenLeaf13.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf13);
  const fallenLeaf14 = new THREE.Mesh(octahedronGeo, leafMat);
  fallenLeaf14.name = 'fallenLeaf14';
  fallenLeaf14.position.set(0.2746, 0.0162, 0.7162);
  fallenLeaf14.rotation.set(0, deg(54.2246), 0);
  fallenLeaf14.scale.set(0.126, 0.0162, 0.09);
  root.add(fallenLeaf14);

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

export default createAutumnTree;
```

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