Raycast Picking
Animation & interaction
Lesson 10 of 15
Turn a pointer position into a camera ray and identify the nearest mesh.
Hover over three shapes to highlight the object intersected by a Raycaster.
How this scene works
Pointer coordinates begin in browser pixels. Subtract the canvas bounding rectangle, divide by its dimensions, then map X and Y into normalized device coordinates from −1 to 1, flipping Y. setFromCamera builds the ray; intersectObjects returns hits nearest-first. Only the authored pickable objects are tested, not helpers or lights. The listener is removed with onCleanup so rerunning the code does not accumulate event handlers.
Raycast Picking
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Replace pointermove with pointerdown so tapping or clicking selects a shape. Give each shape a distinct highlight color and log the selected object's name.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
