import * as EASEL from "easel";

const camera = new EASEL.PerspectiveCamera({
  fov: 45,
  aspect: width / height,
  near: 0.1,
  far: 100,
});
camera.position.set(4, 3, 6);

const renderer = new EASEL.Renderer({ canvas, width, height });
const controls = new EASEL.OrbitControls(camera, canvas);
controls.enableDamping = true;

const box = new EASEL.Mesh(
  new EASEL.BoxGeometry(1.5, 1.5, 1.5),
  new EASEL.LambertMaterial({ color: 0x4488cc }),
);
scene.add(box);

// X = red, Y = green, Z = blue
const axes = new EASEL.AxesHelper(3);
scene.add(axes);

const grid = new EASEL.GridHelper(8, 8, 0x444444, 0x222222);
grid.position.y = -1;
scene.add(grid);

// BoxHelper tracks the object's bounding box; call update() each frame
const boxHelper = new EASEL.BoxHelper(box, 0xffff00);
scene.add(boxHelper);

function animate() {
  requestAnimationFrame(animate);
  box.rotation.y += 0.6 * clock.delta;
  boxHelper.update();
  controls.update();
  renderer.render(scene, camera);
}
animate();