Back to Content

XRHand

files/en-us/web/api/xrhand/index.md

latest3.4 KB
Original Source

{{APIRef("WebXR Device API")}}

The XRHand interface is pair iterator (an ordered map) with the key being the hand joints and the value being an {{domxref("XRJointSpace")}}.

XRHand is returned by {{domxref("XRInputSource.hand")}}.

Instance properties

  • size {{ReadOnlyInline}} {{Experimental_Inline}}
    • : Returns 25, the size of the pair iterator.

Instance methods

The XRHand object is a pair iterator. It can directly be used in a {{jsxref("Statements/for...of", "for...of")}} structure. for (const joint of myHand) is equivalent to for (const joint of myHand.entries()). However, it's not a map-like object, so you don't have the clear(), delete(), has(), and set() methods.

  • entries() {{Experimental_Inline}}
    • : Returns an iterator with the hand joints/{{domxref("XRJointSpace")}} pairs for each element. See {{jsxref("Map.prototype.entries()")}} for more details.
  • forEach() {{Experimental_Inline}}
    • : Runs a provided function once per each hand joint/{{domxref("XRJointSpace")}} pair. See {{jsxref("Map.prototype.forEach()")}} for more details.
  • get() {{Experimental_Inline}}
    • : Returns a {{domxref("XRJointSpace")}} for a given hand joint or {{jsxref("undefined")}} if no such hand joint key is in the map. See {{jsxref("Map.prototype.get()")}} for more details.
  • keys() {{Experimental_Inline}}
    • : Returns an iterator with all the hand joint keys. See {{jsxref("Map.prototype.keys()")}} for more details.
  • values() {{Experimental_Inline}}
    • : Returns an iterator with all the {{domxref("XRJointSpace")}} values. See {{jsxref("Map.prototype.values()")}} for more details.

Hand joints

The XRHand object contains the following hand joints:

Hand jointIndex
wrist0
thumb-metacarpal1
thumb-phalanx-proximal2
thumb-phalanx-distal3
thumb-tip4
index-finger-metacarpal5
index-finger-phalanx-proximal6
index-finger-phalanx-intermediate7
index-finger-phalanx-distal8
index-finger-tip9
middle-finger-metacarpal10
middle-finger-phalanx-proximal11
middle-finger-phalanx-intermediate12
middle-finger-phalanx-distal13
middle-finger-tip14
ring-finger-metacarpal15
ring-finger-phalanx-proximal16
ring-finger-phalanx-intermediate17
ring-finger-phalanx-distal18
ring-finger-tip19
pinky-finger-metacarpal20
pinky-finger-phalanx-proximal21
pinky-finger-phalanx-intermediate22
pinky-finger-phalanx-distal23
pinky-finger-tip24

Examples

Using XRHand objects

js
const wristJoint = inputSource.hand.get("wrist");
const indexFingerTipJoint = inputSource.hand.get("index-finger-tip");

for (const [joint, jointSpace] of inputSource.hand) {
  console.log(joint);
  console.log(jointSpace);
}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

  • {{domxref("XRInputSource.hand")}}