Raycaster

Move the mouse over the grid to highlight cubes via ray-object intersection.

THREE.js migration page CPU rasterizer guide

Benchmark

Runs fixed workloads with warmup frames, repeated samples, p50/p95 FPS and frame timing, workload counters, pipeline timings, and JSON output.

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);
  }
});

import * as THREE from "three";

const raycaster = new THREE.Raycaster();

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

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

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