forked from marlon360/webxr-handtracking
-
Notifications
You must be signed in to change notification settings - Fork 0
/
aframe.html
53 lines (46 loc) · 2.29 KB
/
aframe.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hand Tracking in A-Frame</title>
<script src="js/aframe-master.js"></script>
<script src="js/aframe/hand-tracking.js"></script>
<script src="js/aframe/hand-tracking-gestures.js"></script>
<script src="js/aframe/slider.component.js"></script>
<script src="js/aframe/toggle.component.js"></script>
</head>
<body>
<a-scene webxr="optionalFeatures: hand-tracking">
<a-box position="-1 0.5 -2" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -4" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -2" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -3" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"></a-plane>
<a-entity id="sphere-toggle" position="0 1.2 -0.7" rotation="-30 0 0" toggle></a-entity>
<a-entity id="box-slider" position="-0.4 1.1 -0.6" rotation="-30 20 0" slider="min: 0; max: 360; value: 45;"></a-entity>
<a-entity id="cylinder-slider" position="0.4 1.1 -0.6" rotation="-30 -20 0" slider="min: 0; max: 255; value: 255"></a-entity>
<a-entity hand-tracking="hand: left" hand-tracking-gestures></a-entity>
<a-entity hand-tracking="hand: right" hand-tracking-gestures></a-entity>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
<script>
const box = document.querySelector("a-box");
const boxSlider = document.querySelector("#box-slider");
boxSlider.addEventListener('change', (evt) => {
var newvalue = evt.detail.value;
box.setAttribute("rotation", `0 ${newvalue} 0`);
});
const sphere = document.querySelector("a-sphere");
const sphereToggle = document.querySelector("#sphere-toggle");
sphereToggle.addEventListener('change', (evt) => {
sphere.setAttribute("visible", evt.detail.active);
});
const cylinder = document.querySelector("a-cylinder");
const cylinderSlider = document.querySelector("#cylinder-slider");
cylinderSlider.addEventListener('change', (evt) => {
var newvalue = Math.round( evt.detail.value);
cylinder.setAttribute("color", `#${newvalue.toString(16)}C65D`);
});
</script>
</html>