A procedural tree generator built with Three.js. Over 30 tunable parameters and support for exporting to .glb.
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.params.trunk.length = 20;
tree.params.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.
https://dgreenheck.github.io/tree-js/
npm install
npm run demo
docker compose build
docker compose up -d
color
- Color of the tree trunkflare
- Multipler for base of trunkflatShading
- Use face normals for shading instead of vertex normalslength
- Length of the base trunkmaturity
: Growth stage of treeradius
- Starting radius of the trunktextured
- Apply bark texture
gnarliness
- Max amplitude of random angle added to each section's orientationgnarliness1_R
- Same as above, but inversely proportional to the branch radius. The two terms can be used to balance gnarliness of trunk vs. brancheslengthVariance
- % variance in branch lengthlengthMultiplier
- Length of child branch relative to parentlevels
- Number of branch recursions ( Keep under 5 )minChildren
- Minimum number of child branchesmaxChildren
- Maximum number of child branchesradiusMultiplier
- Radius of child branch relative to parentstart
- 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 branchstop
- 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 branchsweepAngle
- Max sweep of the branches (radians)taper
- Radius of end of branch relative to the start of the branchtwist
- Amount of twisting about the vertical axisq
lengthVariance
- % variance in the nominal section lengthradiusVariance
- % variance in the nominal section radiusrandomization
- Randomization factor applied to verticessections
- Number of sections that make up this branchsegments
- Number of faces around the circumference of the branch
color
- Leaf colormaxCount
- Max number of leaves per branchminCount
- Min number of leaves per branchsize
- Size of leaf texturesizeVariance
- Variance in leaf size between branchesstyle
- Leaf billboard style (single or double)type
- Leaf type (Ash, Aspen or Oak)
direction
- Influences the direction the tree grows towardsstrength
- Strength of the sun influence