demo · v131
Per-joint radius drives pinch detection
The hand-input module gives each joint a radius in addition to its 3D pose — typically derived from anatomy. The motivating gesture-recognition use case is the pinch: the distance between thumb-tip and index-tip drops below the sum of their radii. Drag the thumb / index to see the live pinch detector light up.
device required
The real WebXR Hand Input API only resolves inside an
immersive-ar session on a headset with hand tracking. This page renders a 2D diagram of the joint layout so you can see the radius-driven pinch detection mechanism without a headset.
tip distance
—cm
pinch
—
the api
const xrFrame; const xrRef;
const hand = inputSource.hand;
const thumbTip = hand.get("thumb-tip");
const indexTip = hand.get("index-finger-tip");
const tPose = xrFrame.getJointPose(thumbTip, xrRef);
const iPose = xrFrame.getJointPose(indexTip, xrRef);
const dx = tPose.transform.position.x - iPose.transform.position.x;
const dy = tPose.transform.position.y - iPose.transform.position.y;
const dz = tPose.transform.position.z - iPose.transform.position.z;
const dist = Math.sqrt(dx*dx + dy*dy + dz*dz);
const isPinch = dist < (tPose.radius + iPose.radius);