-
Notifications
You must be signed in to change notification settings - Fork 66
/
card.html
96 lines (77 loc) · 2.85 KB
/
card.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>
<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 = false;
AFRAME.registerComponent('registerevents', {
init: function ()
{
let marker = this.el;
let follower = document.querySelector("#follower");
let followerPlane = document.querySelector("#followerPlane");
marker.addEventListener('markerFound', function() {
// check if marker is found for the first time;
// if so, make object visible and align position/rotation.
if ( follower.getAttribute("active") == "0" )
{
follower.setAttribute("active", "1");
followerPlane.setAttribute("material", "visible", "true");
}
markerVisible = true;
});
marker.addEventListener('markerLost', function() {
markerVisible = false;
});
this.p = new THREE.Vector3();
this.q = new THREE.Quaternion();
this.s = new THREE.Vector3();
},
tick: function (time, deltaTime)
{
// if marker is visible, align the entity to the marker
if (markerVisible)
{
let marker = this.el;
let follower = document.querySelector("#follower");
let followerPlane = document.querySelector("#followerPlane");
let lerpAmount = 0.5;
marker.object3D.getWorldPosition(this.p);
marker.object3D.getWorldQuaternion(this.q);
marker.object3D.getWorldScale(this.s);
follower.object3D.position.lerp(this.p, lerpAmount);
follower.object3D.quaternion.slerp(this.q, lerpAmount);
follower.object3D.scale.lerp(this.s, lerpAmount);
followerPlane.setAttribute("color", "green");
}
else
{
followerPlane.setAttribute("color", "red");
}
}
});
</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/LS.patt" id="baseMarker" registerevents>
</a-marker>
<!--
this entity will move (lerp) towards the marker when visible;
turns green when marker visible, red when marker not visible
-->
<a-entity id="follower" active="0">
<a-plane id="followerPlane"
position="0 0 0"
rotation="-90 0 0"
color = "green"
material="src:#grid; transparent: true; opacity: 0.90; side:double; visible:false;">
</a-plane>
</a-entity>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>