Build a first scene

An EASEL scene follows the familiar scene-graph shape: a Scene contains a Mesh, the mesh combines Geometry and a Material, and a camera projects the result into the renderer’s framebuffer.

import * as EASEL from "@xsyetopz/easel";

const canvas = document.querySelector("canvas");
if (!(canvas instanceof HTMLCanvasElement)) {
  throw new Error("A canvas element is required.");
}

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

const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({
  fov: 70,
  aspect: width / height,
  near: 0.01,
  far: 10,
});
camera.position.z = 1;

const geometry = new EASEL.BoxGeometry(0.2, 0.2, 0.2);
const material = new EASEL.BasicMaterial({ color: 0x4c8bf5 });
const mesh = new EASEL.Mesh(geometry, material);
scene.add(mesh);

function frame(time: number): void {
  mesh.rotation.x = time / 2000;
  mesh.rotation.y = time / 1000;
  renderer.prepare(scene, camera);
  renderer.render(scene, camera);
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

Keep the framebuffer dimensions separate from CSS layout dimensions. When the canvas changes size, call Renderer.setSize() and update the camera’s aspect or frustum before rendering the next frame. See the Renderer API for the complete signature.

Loading render…

Animated box rendered to Canvas2D.

Build a first scene

Related API