import * as EASEL from "easel";

const raycaster = new EASEL.Raycaster();

canvas.addEventListener("mousemove", (event) => {
  const x = (event.offsetX / canvas.clientWidth) * 2 - 1;
  const y = -(event.offsetY / canvas.clientHeight) * 2 + 1;

  camera.updateMatrixWorld();
  const camForRay = {
    type: camera.type,
    matrixWorld: camera.matrixWorld,
    projectionMatrixInverse: new EASEL.Matrix4()
      .copy(camera.projectionMatrix)
      .invert(),
  };

  raycaster.setFromCamera({ x, y }, camForRay);
  const hits = raycaster.intersectObjects(cubes);

  if (hits.length > 0) {
    hits[0].object.material.color.set(0xffffff);
  }
});