-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathar1202-dynamic-content-json-template-literal.html
52 lines (46 loc) · 1.79 KB
/
ar1202-dynamic-content-json-template-literal.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>WebAR: Dynamic Content from JSON with template literal</title>
<script src="./js/aframe/aframe.min.js"></script>
<script src="./js/arjs/aframe-ar.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded vr-mode-ui="enabled: false" arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3; debugUIEnabled: false;">
<!-- add a simple camera -->
<a-entity camera></a-entity>
</a-scene>
<script>
// mengakses DOM scene
scene = document.querySelector("a-scene");
// Mengambil data JSON dari server
let url = './dispatcher/data.json'; // URL dari data JSON
fetch(url)
.then((resp) => resp.json()) // Mengubah text json jadi obyek (pada javascript)
.then(function(data) {
listRuang(data, scene); // membuat obyek
})
.catch(function(error) {
console.log(JSON.stringify(error));
});
// Fungsi membuat obyek tulisan pada a-frame
function listRuang(ruang, scenel) {
for (let i = 0; i < ruang.length; i++) {
let marker =
`<a-marker type="barcode" value="${i}">
<a-text
value="${ruang[i].nama} sedang ${ruang[i].dipakai}"
rotation="-90 0 0"
color="green"
align="center">
</a-text>
</a-marker>
`;
scenel.insertAdjacentHTML('beforeend', marker);
}
}
</script>
</body>
</html>