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,
});
camera.position.set(0, 1, 5);
camera.lookAt(new EASEL.Vector3(0, 0, 0));

const renderer = new EASEL.Renderer({ canvas, width, height });

scene.add(new EASEL.AmbientLight(0xffffff, 0.5));
const light = new EASEL.DirectionalLight(0xffffff, 0.8);
light.position.set(4, 6, 5);
scene.add(light);

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

const loader = new EASEL.TextureLoader();
loader.load("textures/Brick_01.png", (texture) => {
  material.map = texture;
});

const clock = new EASEL.Clock();
function animate() {
  requestAnimationFrame(animate);
  box.rotation.x += 0.3 * clock.delta;
  box.rotation.y += 0.5 * clock.delta;
  renderer.render(scene, camera);
}
animate();