Hello Cube

import * as EASEL from "easel";

const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({
  fov: 45,
  aspect: 800 / 600,
  near: 0.1,
  far: 100,
});
camera.position.z = 5;

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

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

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

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

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  45,
  800 / 600,
  0.1,
  100,
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(800, 600);

scene.add(new THREE.AmbientLight(0xffffff, 0.4));
const light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.set(3, 5, 4);
scene.add(light);

const box = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshLambertMaterial({ color: 0xff4444 }),
);
scene.add(box);

const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  box.rotation.y += 0.8 * clock.getDelta();
  renderer.render(scene, camera);
}
animate();