import * as EASEL from "easel";

// Draw a procedural pattern onto an offscreen canvas,
// then wrap it in EASEL.CanvasTexture - no file loading required.

const offscreen = document.createElement("canvas");
offscreen.width = 64;
offscreen.height = 64;
const ctx = offscreen.getContext("2d");

const cells = 4;
const cellSize = 64 / cells;
for (let row = 0; row < cells; row++) {
  for (let col = 0; col < cells; col++) {
    ctx.fillStyle = (row + col) % 2 === 0 ? "#000" : "#fff";
    ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
  }
}

// CanvasTexture reads the canvas pixels immediately
const texture = new EASEL.CanvasTexture(offscreen);
const material = new EASEL.BasicMaterial({ color: 0xffffff, map: texture });
const box = new EASEL.Mesh(new EASEL.BoxGeometry(2.5, 2.5, 2.5), material);
scene.add(box);

// To update the texture at runtime, redraw the canvas and reassign:
// material.map = new EASEL.CanvasTexture(offscreen);
// material.needsUpdate = true;