import * as EASEL from "easel";

const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({
  fov: 45,
  aspect: width / height,
  near: 0.1,
  far: 100,
});

scene.add(new EASEL.AmbientLight(0xffffff, 0.2));
const dirLight = new EASEL.DirectionalLight(0xffffff, 1);
dirLight.position.set(4, 6, 5);
scene.add(dirLight);

// EASEL.ToonMaterial: stepped shading - hard transitions between bands.
// Adjust light intensity to see how bands shift.
const colors = [0xe05050, 0x50b050, 0x5080e0, 0xe0b040];
for (let i = 0; i < colors.length; i++) {
  const color = colors[i];
  const mesh = new EASEL.Mesh(
    new EASEL.SphereGeometry(0.9, 24, 16),
    new EASEL.ToonMaterial({ color }),
  );
  mesh.position.x = (i - 1.5) * 2.2;
  scene.add(mesh);
}