Interaction Tools

Texture Picking

What this shows

A marker follows pointer hits across a patterned board.

Loading scene…

Key API excerpt

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


raycaster.setFromCamera(pointer, camera);
const hit = raycaster.intersectObject(board)[0];

if (hit) {
  const localHit = board.worldToLocal(hit.point.clone());
  const uvX = (localHit.x + 2.2) / 4.4;
  const uvY = (localHit.y + 1.6) / 3.2;

  marker.visible = true;
  marker.position.set(hit.point.x, hit.point.y, 0.08);
  marker.scale.set(0.7 + uvX * 0.5, 0.7 + uvY * 0.5, 0.7 + uvX * 0.5);
} else {
  marker.visible = false;
}