👉 Handy.js 👈
Handy makes defining and recognizing custom hand poses in WebXR a snap.
Why use hand-held controllers when you can use your bare hands? 👋
Handy recognizes over 100 hand poses
right out of the box—including the
American Sign Language (ASL) alphabet.
Are you a developer?
Recording and adding new pose definitions is easy.
Want more efficiency?
Slimming down the number of poses to detect is even easier.
Here’s the
Handy.js source code.
Demo.
👉 Make your hand into a “finger gun” pose,
then tap your thumb down onto your middle finger
to shoot lasers from your hand.
✊ Make a fist to cycle through different hand model visual styles.
✌️ Make a “peace sign” to toggle the hand-specific colors—red for right, green for left.
Requirements.
This code has been designed for the
Oculus Quest
headset, though device support
will expand as more devices implement the
WebXR hand tracking API.
Be sure your Oculus Quest has all of the latest software updates
installed, including Oculus Browser 15.3.0 or later, then
follow these steps to experience the demo for yourself:
-
In the main Settings menu
navigate to Device → Hands and Controllers.
Enable both Hand Tracking
and Auto Enable Hands or Controllers.
-
In Oculus Browser
visit chrome://flags/.
and search for “hands” in the flags search box.
-
Within the flags page, enable
the “WebXR experiences with joints tracking” flag
(
#webxr-hands
).
-
Again, within this flags page,
set the “WebXR experiences with joints tracking” flag
(
#webxr-hands
)
to Enabled.
-
Restart Oculus Browser
and visit this site again.
Use your hand controllers
to click the “Enter VR” button.
Once you are inside the experience put your controllers down,
hold your hands out in front of you
so that the headset can see them,
and enjoy! 👍
I’m Stewart.
This demo illustrates the use of the
WebXR device hand input API
for hand and finger tracking,
as tested on an
Oculus Quest
stand-alone headset.
This experience is live at
https://stewartsmith.io/handy/.
This code is open-source and available at
https://github.com/stewdio/handy.js.