-
Notifications
You must be signed in to change notification settings - Fork 66
/
detection.html
102 lines (85 loc) · 3.01 KB
/
detection.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
97
98
99
100
101
102
<!doctype HTML>
<html>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden;">
<script>
let markerVisible = { "redMarker": false, "yellowMarker": false, "blueMarker": false };
AFRAME.registerComponent('registerevents', {
init: function ()
{
let marker = this.el;
marker.addEventListener('markerFound', function() {
markerVisible[ marker.id ] = true;
// console.log( markerVisible );
});
marker.addEventListener('markerLost', function() {
markerVisible[ marker.id ] = false;
// console.log( markerVisible );
});
}
});
AFRAME.registerComponent('loop',
{
init: function()
{
this.box = document.querySelector("#theBox");
},
tick: function (time, deltaTime)
{
// for convenience
let mv = markerVisible, r = "redMarker", y = "yellowMarker", b = "blueMarker";
if ( mv[r] && mv[y] && mv[b] )
this.box.setAttribute("color", "#654321");
else if ( mv[r] && mv[y] && !mv[b] )
this.box.setAttribute("color", "#FF8800");
else if ( mv[r] && !mv[y] && mv[b] )
this.box.setAttribute("color", "purple");
else if ( mv[r] && !mv[y] && !mv[b] )
this.box.setAttribute("color", "red");
else if ( !mv[r] && mv[y] && mv[b] )
this.box.setAttribute("color", "green");
else if ( !mv[r] && mv[y] && !mv[b] )
this.box.setAttribute("color", "yellow");
else if ( !mv[r] && !mv[y] && mv[b] )
this.box.setAttribute("color", "blue");
else // if ( !mv[r] && !mv[y] && !mv[b] )
this.box.setAttribute("color", "gray");
}
});
</script>
<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-assets>
<img id="grid" src="images/border.png" />
</a-assets>
<a-marker type="pattern" url="data/kanji.patt" id="baseMarker">
<a-box id="theBox"
position="0 0.5 0"
color = "white"
material="src:#grid; transparent: true; opacity: 0.90;">
</a-box>
</a-marker>
<a-marker type="barcode" value="0" id="redMarker" registerevents>
<a-plane position="0 0 0"
rotation="-90 0 0"
material="color: red">
</a-plane>
</a-marker>
<a-marker type="barcode" value="1" id="yellowMarker" registerevents>
<a-plane position="0 0 0"
rotation="-90 0 0"
material="color: yellow">
</a-plane>
</a-marker>
<a-marker type="barcode" value="2" id="blueMarker" registerevents>
<a-plane position="0 0 0"
rotation="-90 0 0"
material="color: blue">
</a-plane>
</a-marker>
<a-entity camera></a-entity>
<a-entity loop></a-entity>
</a-scene>
</body>
</html>