-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·96 lines (93 loc) · 3.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
<title>VR Hands</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Finger guns via Oculus Quest hand tracking and Three.js.">
<meta name="author" content="Stewart Smith">
<meta name="copyright" content="Stewart Smith 2020">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@stew_rtsmith">
<meta name="twitter:creator" content="@stew_rtsmith">
<meta name="twitter:title" content="VR Hands">
<meta name="twitter:description" content="Finger guns via Oculus Quest hand tracking and Three.js.">
<meta name="twitter:image" content="http://stewartsmith.io/studies/vr-hands/media/vr-hands.jpg">
<meta name="twitter:url" content="http://stewartsmith.io/studies/vr-hands/">
<meta property="og:type" content="website">
<meta property="og:title" content="VR Hands">
<meta property="og:description" content="Finger guns via Oculus Quest hand tracking and Three.js.">
<meta property="og:image" content="http://stewartsmith.io/studies/vr-hands/media/vr-hands.jpg">
<meta property="og:url" content="http://stewartsmith.io/studies/vr-hands/">
<link type="text/css" rel="stylesheet" href="styles/base.css">
<script type="module" src="scripts/main.js"></script>
</head>
<body>
<div id="three"></div>
<section>
👋 Ahoy.<br>
<br>
I’m <a href="https://stewartsmith.io" target="_blank">Stewart</a>.
This demo illustrates the use of the
<a href="https://github.com/immersive-web/webxr-hand-input/blob/master/explainer.md" target="_blank">WebXR device hand input API</a>
for hand and finger tracking,
as tested on an
<a href="https://www.oculus.com/quest/" target="_blank">Oculus Quest</a>
stand-alone headset.
This experience is live at
<a href="https://stewartsmith.io/studies/vr-hands/">https://stewartsmith.io/studies/vr-hands/</a>.
This code is open-source and available at
<a href="https://github.com/stewdio/vr-hands" target="_blank">https://github.com/stewdio/vr-hands</a>.
<br>
<br>
<strong>Explore</strong>.
Make your hand into a “finger gun” shape
then tap your thumb down
onto your middle finger
to shoot lasers from your hand.
Make a fist to cycle through different hand model styles.
“Devil horns” toggle the hand-specific colors.
<br>
<br>
<br>
If you have a Quest handy
you’ll need to follow these steps before you can
experience the demo yourself:
<br>
<ol>
<li>
In Oculus <strong>settings</strong>
enable automatic switching between regular hand controlles
and bare hands.
</li>
<li>
In the Oculus <strong>browser</strong>
visit <a href="chrome://flags/" taget="_blank">chrome://flags/</a>.
</li>
<li>
Within the flags page, <strong>enable</strong>
the “WebXR experiences with joints tracking” flag
(<code>#webxr-hands</code>).
</li>
<li>
Within the flags page, <strong>disable</strong>
the “WebXR experiences with hands tracking” flag
(<code>#webxr-hands-tracking</code>).
Yes. <em>Disable</em> it.
We’re at that funny early stage of the technology where
things are not always what they seem.
</li>
<li>
Restart the 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! 😄
</li>
</ol>
</section>
</body>
</html>