Hand tracking allows users to interact with virtual environments naturally, using pinches, grabs, and swipes.

Module 1: Accessing Hand Joints

WebXR exposes 25 tracked joints per hand.

hands.jsjavascript
const session = await navigator.xr.requestSession('immersive-vr', { optionalFeatures: ['hand-tracking'] });

// Inside render loop
for (const source of session.inputSources) {
  if (source.hand) {
    const indexFingerTip = source.hand.get('index-finger-tip');
    const jointPose = frame.getJointPose(indexFingerTip, referenceSpace);
    // Use jointPose.transform to interact with UI
  }
}

Module 2: Gesture Recognition

Calculate the distance between the thumb tip and index finger tip to detect a 'pinch' gesture, often used for selection and dragging.