-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstenen.html
96 lines (77 loc) · 3.36 KB
/
stenen.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>
<head>
<title>XR in aardrijkskunde</title>
</head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>
let markerVisible = { "Malachiet": false, "Zuur": 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.SteenMalachiet1 = document.querySelector("#SteenMalachiet1");
this.ToolZuur1 = document.querySelector("#ToolZuur1");
},
tick: function (time, deltaTime) {
// for convenience
let mv = markerVisible;
if (mv["Zuur"])
this.SteenMalachiet1.setAttribute("particle-system", "texture: images/particles/star.png; color: #FF0000, #FFFF00; size: 1, 0; velocityValue: 0.001 0.001 0.001; velocitySpread: 0.5 0 0.5; accelerationValue: 0.001 0.001 0.001; accelerationSpread: 0.001 0.001 0.001; rotationAngle: 0; blending: 1; particleCount: 200; maxAge: 5; ")
else if (mv["Zuur"] == false)
this.SteenMalachiet1.setAttribute("particle-system", "");
}
});
</script>
<body style="margin: 0px; overflow: hidden;">
<a-scene embedded vr-mode-ui="enabled: false;"
arjs="debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-assets>
<a-asset-item id="malachiet1" src="models/stenen/malachite.gltf"></a-asset-item>
</a-assets>
<a-marker type="barcode" value="1" id="Malachiet" registerevents>
<a-entity id="SteenMalachiet1" position="0 0 0" rotation="0 0 0" scale="1 1 1" gltf-model="#malachiet1">
</a-entity>
</a-marker>
<a-marker type="barcode" value="2" id="Zuur" registerevents>
<a-entity id="ToolZuur1" position="0 0 0" rotation="0 0 0" scale="1 1 1" gltf-model="#malachiet1">
</a-entity>
</a-marker>
<a-marker type="barcode" value="3">
<a-entity
gltf-model="#malachiet1"
position="0 0 0"
rotation="0 0 0"
scale="1 1 1"
particle-system="
texture: images/particles/star.png;
color: #FF0000, #FFFF00;
size: 1, 0;
velocityValue: 0.001 0.001 0.001;
velocitySpread: 0.5 0 0.5;
accelerationValue: 0.001 0.001 0.001;
accelerationSpread: 0.001 0.001 0.001;
rotationAngle: 0;
blending: 1;
particleCount: 200;
maxAge: 5; ">
</a-entity>
</a-marker>
<!-- Dit zorgt ervoor dat de camera van de gebruiker wordt opgevraagd -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>