AR/ar0208-animation.html at master · meizano/AR · GitHub

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
<!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: Fixed UI</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>
    <style>
        #UI {
            position: fixed;
            bottom: 1rem;
            left: 1rem;
        }
    </style>
</head>

<body style="margin : 0px; overflow: hidden;">
    <a-scene embedded vr-mode-ui="enabled: false" arjs="debugUIEnabled: false;">

        <a-marker>
            <a-box position="0 0.5 0" material="color: green; opacity: 0.5;">
                <a-text value="Marker Hiro" rotation="-90 0 0" color="magenta" align="center"></a-text>
                <a-icosahedron scale="0.3 0.3 0.3" animation="property: rotation; to: 360 360 360; loop: true; dur: 10000; easing: linear; "></a-icosahedron>
            </a-box>
        </a-marker>

        <!-- UI Element inside a-scene -->
        <!-- z position must be minus value (e.g. -1) to placed in front of camera-->
        <a-box position="0 0 -1" scale="0.5 0.5 0.5" rotation="45 45 45" color="blue" depth="0.2" height="0.4" width="0.6" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000; easing: linear;">
        </a-box>
        <a-text value="Gunakan marker hiro" position="0 0 6" color="yellow" align="center"></a-text>
        <!-- add a simple camera -->
        <a-entity camera></a-entity>

    </a-scene>
    <!-- UI Element outside a-scene -->
    <div id="UI">You can put UI as fixed component</div>
</body>

</html>