-
Notifications
You must be signed in to change notification settings - Fork 66
/
line.html
95 lines (78 loc) · 2.71 KB
/
line.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
<!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>
// store visibility data in object;
// can only draw line when both are visible.
let markerVisible = { m0: false, m1: false };
AFRAME.registerComponent('registerevents', {
init: function ()
{
let marker = this.el;
marker.addEventListener('markerFound', function() {
markerVisible[ marker.id ] = true;
});
marker.addEventListener('markerLost', function() {
markerVisible[ marker.id ] = false;
});
}
});
AFRAME.registerComponent('run', {
init: function()
{
this.m0 = document.querySelector("#m0");
this.m1 = document.querySelector("#m1");
this.p0 = new THREE.Vector3();
this.p1 = new THREE.Vector3();
this.geometry = new THREE.Geometry();
this.geometry.vertices.push( new THREE.Vector3(-1,-1,-1) );
this.geometry.vertices.push( new THREE.Vector3( 1, 1, 1) );
this.material = new THREE.LineBasicMaterial( {color: 0xFF0000} );
this.line = new THREE.Line( this.geometry, this.material );
let scene = document.querySelector('a-scene').object3D;
scene.add( this.line );
},
tick: function (time, deltaTime)
{
if ( markerVisible["m0"] && markerVisible["m1"] )
{
this.m0.object3D.getWorldPosition(this.p0);
this.m1.object3D.getWorldPosition(this.p1);
this.geometry.vertices[0] = this.p0;
this.geometry.vertices[1] = this.p1;
this.geometry.verticesNeedUpdate = true;
this.line.visible = true;
}
else
{
this.line.visible = false;
}
}
});
</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="barcode" value="0" id="m0" registerevents>
<a-plane position="0 0 0"
rotation="-90 0 0"
material="color: white; transparent: true; opacity: 0.10;">
</a-plane>
</a-marker>
<a-marker type="barcode" value="1" id="m1" registerevents>
<a-plane position="0 0 0"
rotation="-90 0 0"
material="color: white; transparent: true; opacity: 0.10;">
</a-plane>
</a-marker>
<a-marker type="pattern" url="data/kanji.patt" id="baseMarker" >
</a-marker>
<a-entity camera></a-entity>
<a-entity run></a-entity>
</a-scene>
</body>
</html>