EASEL.js

3D scenes on Canvas2D.

Build 3D scenes that render to Canvas2D.

Start with the API reference, a live example, or a first-scene guide.

Install and render a first frame

Install @xsyetopz/easel, then render a scene into a canvas element.

index.html
<canvas id="frame" width="640" height="360"></canvas>
<script type="module">
  import {
    BasicMaterial,
    BoxGeometry,
    Mesh,
    PerspectiveCamera,
    Renderer,
    Scene,
  } from "@xsyetopz/easel";

  const canvas = document.querySelector("#frame");
  if (!(canvas instanceof HTMLCanvasElement)) throw new Error("Canvas element #frame is required.");
  const renderer = new Renderer({ canvas, width: 640, height: 360 });
  const scene = new Scene();
  const camera = new PerspectiveCamera({
    fov: 45,
    aspect: 640 / 360,
    near: 0.1,
    far: 100,
  });
  camera.position.set(0, 0, 4);
  camera.lookAt(0, 0, 0);
  scene.add(new Mesh(new BoxGeometry(), new BasicMaterial({ color: 0x0969da })));
  renderer.prepare(scene, camera);
  renderer.render(scene, camera);
</script>