Tree.js

A procedural tree generator built with Three.js. Over 30 tunable parameters and support for exporting to .glb.

Live Demo

https://dgreenheck.github.io/tree-js/

Installation

The tree generation code is published as an npm package and can be imported into your own project.

npm i @dgreenheck/tree-js

Usage

// Create new instance
const tree = new Tree();

// Set parameters
tree.options.trunk.length = 20;
tree.options.branch.levels = 3;

// Generate tree and add to scene
tree.generate();
scene.add(tree);

Any time the tree parametes are changed, you must call generate() to regenerate the geometry.

For more info, see the demo app for an example on how to create a tree.

Demo

The demo application is a Three.js app which allows you to tune the parameters of the tree in real-time. It also has options for exporting the generated mesh to a .glb file, as well as a .png export of the current view for 2D applications.

Running Demo Locally

npm install
npm run build:npm
npm run demo

Running Demo with Docker

docker compose build
docker compose up -d

Parameters

seed - Seed for RNG

Trunk

color - Color of the tree trunk
flatShading - Use face normals for shading instead of vertex normals
length - Length of the base trunk
radius - Starting radius of the trunk

Branches

levels - Number of branch recursions ( Keep under 5 )
children - Number of child branches
start - Defines where child branches start forming on the parent branch. A value of 0.6 means the child branches can start forming 60% of the way up the parent branch
stop - Defines where child branches stop forming on the parent branch. A value of 0.9 means the child branches stop forming 90% of the way up the parent branch
angle - Angle between child branch and parent branch (radians)
angleVariance - Variation in angle (radians)
lengthVariance - Variation in branch length
lengthMultiplier - Length of child branch relative to parent
radiusMultiplier - Radius of child branch relative to parent
taper - Radius of end of branch relative to the start of the branch
gnarliness - Max amplitude of random angle added to each section's orientation
twist - Amount of twisting about the vertical axis

External Force

direction - Influences the direction the tree grows towards
strength - Strength of the sun influence

Geometry

sections - Number of sections that make up this branch
segments - Number of faces around the circumference of the branch
lengthVariance - % variance in the nominal section length
radiusVariance - % variance in the nominal section radius
randomization - Randomization factor applied to vertices

Leaves

style - Leaf billboard style (single or double)
type - Leaf type (Ash, Aspen or Oak)
color - Leaf color
count - Number of leaves per branch
size - Size of leaf texture
sizeVariance - Variance in leaf size between branches

cringelord1940/tree-js