Scene Hierarchy
Sun-planet-moon system: nested Group pivots compose parent transforms automatically.
import * as EASEL from "easel";
const sun = new EASEL.Mesh(new EASEL.SphereGeometry(1), new EASEL.BasicMaterial({ color: 0xffcc00 }));
scene.add(sun);
const planetPivot = new EASEL.Group();
sun.add(planetPivot);
const planet = new EASEL.Mesh(new EASEL.SphereGeometry(0.4), new EASEL.LambertMaterial({ color: 0x4488cc }));
planet.position.x = 4;
planetPivot.add(planet);
const moonPivot = new EASEL.Group();
planet.add(moonPivot);
const moon = new EASEL.Mesh(new EASEL.SphereGeometry(0.15), new EASEL.LambertMaterial({ color: 0xaaaaaa }));
moon.position.x = 1;
moonPivot.add(moon);
sun.rotation.y += 0.1 * dt;
planetPivot.rotation.y += 0.5 * dt;
moonPivot.rotation.y += 2.0 * dt;