canvas

raycaster / sprite

What this shows

Hover the pointer over rotated, offset, and nested sprites to pick them with a Raycaster.

Side by side with the three.js r186 original: webgl_raycaster_sprite.html

Differences from three.js

EASEL sprites have no sizeAttenuation option, so the small sprite scales with distance instead of keeping a fixed screen size.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


const raycaster = new EASEL.Raycaster();
const pointer = new EASEL.Vector2();
const sprite = new EASEL.Sprite(new EASEL.SpriteMaterial({ color: "#69f" }));
sprite.center.set(-0.1, 0);
sprite.material.rotation = Math.PI / 3;
group.add(sprite);

canvas.addEventListener("pointermove", (event) => {

  raycaster.setFromCamera(pointer, camera);
  const hit = raycaster.intersectObject(group, true)[0];
  if (hit) hit.object.material.color.set("#f00");
});