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

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

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

npm i @dgreenheck/tree-js

// 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.

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.

npm install
npm run build:npm
npm run demo

docker compose build
docker compose up -d

• seed - Seed for RNG

• 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

• 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

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

• 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

• 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