Build Realistic 3D Trees in Three.js with ez‑Tree – Quick Installation & Usage Guide

Installation

Install the @dgreenheck/ez-tree package with npm or pnpm:

npm i @dgreenheck/ez-tree
pnpm add @dgreenheck/ez-tree

Usage

Import the Tree class, generate a tree, set its position and scale, add it to a Three.js scene, and update it each frame.

import { Tree } from '@dgreenheck/ez-tree';

function createTree() {
    const tree = new Tree();
    tree.generate();
    tree.position.set(0, 0, 0);
    tree.scale.set(0.1, 0.1, 0.1);
    this.scene.add(tree);
    this.tree = tree; // keep reference for updates
}

function animate() {
    this.renderAnimation = requestAnimationFrame(() => this.animate());
    const elapsed = this.clock.getElapsedTime();
    if (!this.pointerLockControls) {
        this.controls.update();
    }
    if (this.tree) {
        this.tree.update(elapsed); // wind or other dynamics
    }
    this.renderer.render(this.scene, this.camera);
}

Parameters & Customization

The library provides methods to create different tree types and adjust visual attributes such as branch direction, leaf density, and overall scale. These settings can be changed via class properties or the online demo on the repository.

Project Repository

Source code and documentation are hosted at:

https://github.com/dgreenheck/ez-tree