import * as EASEL from "easel";

const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({
  fov: 60, aspect: width / height, near: 0.1, far: 200,
});
camera.position.set(0, 8, 20);

const renderer = new EASEL.Renderer({ canvas, width, height });
scene.add(new EASEL.AmbientLight(0xffffff, 0.4));

const leafGeo = new EASEL.BoxGeometry(0.3, 0.3, 0.3);

// Build a tree of Groups: each level adds branches with
// scaled-down children. Leaf nodes get a Mesh.
function buildTree(parent, level, maxDepth, branches) {
  if (level >= maxDepth) {
    parent.add(new EASEL.Mesh(leafGeo, new EASEL.LambertMaterial({ color: 0x5577dd })));
    return;
  }
  for (let i = 0; i < branches; i++) {
    const group = new EASEL.Group();
    group.position.x = (i - (branches - 1) / 2) * 2 / (level + 1);
    group.scale.set(0.8, 0.8, 0.8);
    parent.add(group);
    buildTree(group, level + 1, maxDepth, branches);
  }
}

const root = new EASEL.Group();
buildTree(root, 0, 8, 2);
scene.add(root);