-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathar0802-ui-aframe-interactive.html
60 lines (52 loc) · 2.89 KB
/
ar0802-ui-aframe-interactive.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Correcting zooming issue -->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>WebAR: UI using A-Frame</title>
<!-- Library untuk VR membangun 3D -->
<script src="./js/aframe/aframe.min.js"></script>
<!-- Library untuk AR yang melakukan pengenalan marker dan menyematkan kamera-->
<script src="./js/arjs/aframe-ar.js"></script>
<script>
// here we register che 'clickhandler' component
AFRAME.registerComponent("clickhandler", {
init: function() {
// we add the click event listener to any instance of this component
this.el.addEventListener("click", () => {
alert("Clicked!");
});
}
});
</script>
</head>
<body style="margin : 0px; overflow: hidden;">
<!-- with cursor and raycaster, we define a raycaster handler.
With 'raycaster' we add a CSS selector to match the only elements that will react to click events,
for performances reasons. See: (https://aframe.io/docs/1.0.0/introduction/interactions-and-controllers.html) -->
<a-scene cursor="rayOrigin: mouse; fuse: true; fuseTimeout: 0;" raycaster="objects: [clickhandler];" vr-mode-ui="enabled: false" embedded arjs="sourceType: webcam; debugUIEnabled: false;">
<!-- add a hiro marker -->
<a-marker preset="hiro">
<!-- this entity, potentially every other on the a-scene, has the 'clickhandler' component
and will behave has we have defined: it will handle click events! -->
<a-box clickhandler position="0 0.5 0" material="color: green; opacity: 0.5;">
<a-text value="Marker Hiro" position="0 0.55 0" rotation="-90 0 0" color="magenta" align="center">
</a-text>
</a-box>
</a-marker>
<!-- UI Element inside a-scene -->
<!-- object relative to camera -->
<!-- z position must be minus value (e.g. -1) to placed in front of camera-->
<!-- this entity, potentially every other on the a-scene, has the 'clickhandler' component
and will behave has we have defined: it will handle click events! -->
<a-entity position="0 .25 -1" scale=".1 .1 .1">
<a-box clickhandler rotation="45 45 45" position="-1.5 0 0" scale=".3 .3 .3" color="blue" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000; easing: linear;"></a-box>
<a-text value="Gunakan marker hiro" color="orange" align="center"></a-text>
<a-box clickhandler rotation="45 45 45" position="1.5 0 0" scale=".3 .3 .3" color="blue" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000; easing: linear;"></a-box>
</a-entity>
<!-- add a simple camera -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>