Skip to content

Commit 458322c

Browse files
meizanomeizano
committed
add ar-orientation-listener
1 parent 9467dff commit 458322c

8 files changed

+92
-18
lines changed

‎ar-event-marker-move.html

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,20 @@
1010
<!-- Library untuk AR yang melakukan pengenalan marker dan menyematkan kamera-->
1111
<script src="./js/arjs/aframe-ar.js"></script>
1212
<title>WebAR: Marker Move Object</title>
13+
<script>
14+
let edo;
15+
AFRAME.registerComponent("move", {
16+
init: function() {
17+
edo = this;
18+
},
19+
tick: function() {
20+
var obj3d = this.el.sceneEl.querySelector("a-marker");
21+
// console.log(obj3d);
22+
this.el.object3D.setRotationFromQuaternion(obj3d.object3D.quaternion);
23+
this.el.object3D.position.set(obj3d.object3D.position.x, obj3d.object3D.position.y, obj3d.object3D.position.z);
24+
}
25+
});
26+
</script>
1327
</head>
1428

1529
<body style="margin : 0px; overflow: hidden;">
@@ -20,13 +34,15 @@
2034
<a-sphere color="red" material="opacity: 0.5; color: blue;" radius="0.5"></a-sphere>
2135
</a-marker>
2236

23-
<a-box color="red" material="opacity: 0.5; color: red;"></a-box>
37+
<a-box move color="red" material="opacity: 0.5; color: red;"></a-box>
2438

2539
<!-- add a simple camera -->
2640
<a-entity camera></a-entity>
2741

2842
</a-scene>
2943
<script>
44+
// DON'T USE THIS, USE AFRAME.RegisterComponent instead
45+
/*
3046
// a-marker
3147
let m = document.querySelector("a-marker");
3248
@@ -48,6 +64,7 @@
4864
m.addEventListener("markerLost", (e) => {
4965
setTimeout(updateTransformation(m.object3D, box), 2);
5066
});
67+
*/
5168
</script>
5269
</body>
5370

‎ar-marker-with-qr-code.html

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,13 @@
1515
<body style="margin : 0px; overflow: hidden;">
1616
<a-scene embedded vr-mode-ui="enabled: false" arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3; debugUIEnabled: true;">
1717

18-
<!-- add a simple camera -->
19-
<a-entity camera></a-entity>
20-
21-
<!-- handle hiro marker -->
22-
<a-marker preset="hiro">
23-
<a-box position="0 0.5 0" material="color:blue;"></a-box>
18+
<!-- handle custom marker, ganti dengan pattern QR Code -->
19+
<a-marker-camera type="pattern" url="./marker/unila-bw/ar-marker-unila.patt"></a-marker-camera>
20+
<a-box position="0 0.5 0" material="color:blue;"></a-box>
2421
</a-marker>
2522

26-
<!-- handle matrix marker -->
27-
<a-marker type="barcode" value="0">
28-
<a-box position="0 0.5 0" width="5" height="5" depth="5" material="opacity: 0.5; side: double;color:red;">
29-
<a-torus-knot radius="0.26" radius-tubular="0.05" animation="property: rotation; to: 0 360 0;easing: linear; dur: 2000; loop: true;"></a-torus-knot>
30-
</a-box>
31-
</a-marker>
23+
<!-- add a simple camera -->
24+
<a-entity camera></a-entity>
3225

3326
</a-scene>
3427
<ul>

‎ar-orientation-listener.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype HTML>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6+
<!-- Correcting zooming issue -->
7+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
8+
<!-- Library untuk VR membangun 3D -->
9+
<script src="./js/aframe/aframe.min.js"></script>
10+
<!-- Library untuk AR yang melakukan pengenalan marker dan menyematkan kamera-->
11+
<script src="./js/arjs/aframe-ar.js"></script>
12+
<title>WebAR: Orientation Listener</title>
13+
<style>
14+
/* Mengatur posisi elemen pada halaman */
15+
16+
#UI {
17+
position: absolute;
18+
bottom: 1rem;
19+
left: 1rem;
20+
right: 1rem;
21+
}
22+
23+
.UI {
24+
font-family: Arial, Helvetica, sans-serif;
25+
font-size: 1.5em;
26+
font-weight: 200;
27+
text-align: center;
28+
color: orange;
29+
background-color: blue;
30+
display: block;
31+
}
32+
</style>
33+
<script>
34+
AFRAME.registerComponent("orientation-listener", {
35+
tick: function() {
36+
var cameraEl = this.el.sceneEl.camera.el;
37+
var cameraOrientation = cameraEl.object3D.quaternion;
38+
this.el.object3D.setRotationFromQuaternion(cameraOrientation);
39+
ui.innerHTML = "w: " + cameraOrientation._w + ", x: " + cameraOrientation._x + ", y: " + cameraOrientation._y + ", z: " + cameraOrientation._z;
40+
}
41+
});
42+
</script>
43+
</head>
44+
45+
<body style="margin : 0px; overflow: hidden;">
46+
<a-scene embedded vr-mode-ui="enabled: false" arjs="debugUIEnabled: false;">
47+
48+
<a-marker>
49+
<a-entity id="obj" rotation="-90 0 0" position="0 0.5 0"></a-entity>
50+
<a-gltf-model src="./assets/skull_downloadable/scene.gltf" orientation-listener scale="0.3 0.3 0.3"></a-gltf-model>
51+
<a-box material="opacity: 0.5;"></a-box>
52+
<a-plane width=1 height=1 depth=0 rotation="90 0 0" position="0 -0.5 0" material="color: white;"></a-box>
53+
</a-marker>
54+
55+
<a-entity camera></a-entity>
56+
</a-scene>
57+
<!-- UI Element outside a-scene -->
58+
<div id="UI" class="UI">Marker information here.</div>
59+
<script>
60+
// mengakses DOM UI
61+
let ui = document.querySelector("#UI");
62+
</script>
63+
</body>
64+
65+
</html>

‎ar0901-event-marker-found.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
let message = "Found marker at x: " + m.object3D.position.x + ", y: " + m.object3D.position.x + ", z: " + m.object3D.position.z;
6868

6969
ui.classList.add("found");
70-
ui.innerHTML = "message";
70+
ui.innerHTML = message;
7171
});
7272
</script>
7373
<!-- referensi: https://stackoverflow.com/questions/44799413/how-to-detect-when-a-marker-is-found-in-ar-js -->

‎ar0902-event-marker-lost.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
let message = "Lost marker at x: " + m.object3D.position.x + ", y: " + m.object3D.position.x + ", z: " + m.object3D.position.z;
6868

6969
ui.classList.add("lost");
70-
ui.innerHTML = "message";
70+
ui.innerHTML = message;
7171
});
7272
</script>
7373
<!-- referensi: https://stackoverflow.com/questions/44799413/how-to-detect-when-a-marker-is-found-in-ar-js -->

‎ar0903-event-marker-found-and-lost.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
message = "Lost " + message;
8080
}
8181

82-
infoui.innerHTML = "message";
82+
infoui.innerHTML = message;
8383
}
8484

8585
// Detecting single marker

‎ar0904-ar-event-marker-multiple.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@
200200
message = "Lost " + message;
201201
}
202202

203-
infoui.innerHTML = "message";
203+
infoui.innerHTML = message;
204204
}
205205

206206
// Detecting single marker

‎assets/fonts/exo2BlackItalic.typeface.json

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)