AR/ar0501-marker-multiple.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
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!-- Correcting zooming issue -->
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 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>
    <title>WebAR: Multiple Marker</title>
    <!-- include text geometry -->
    <script src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.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;">

        <!-- create assets -->
        <a-assets timeout="900000">
            <a-asset-item id="drone" src="./assets/busterDrone/busterDrone.gltf"></a-asset-item>
            <a-asset-item id="cookie" src="./assets/cookie5/cookie5.gltf"></a-asset-item>
            <a-asset-item id="roti" src="./assets/roti/roti.gltf"></a-asset-item>
            <a-asset-item id="motorbike" src="./assets/motorbike/scene.gltf"></a-asset-item>
            <a-asset-item id="helmet" src="./assets/damagedHelmet/damagedHelmet.gltf"></a-asset-item>
            <a-asset-item id="skull" src="./assets/skull_downloadable/scene.gltf"></a-asset-item>
            <img id="bougenville" src="./images/photo/bougenville.jpg">
            <img id="kio" src="./images/photo/kio.jpg">
            <img id="mahasiswa" src="./images/photo/mahasiswa.jpg">
            <img id="airterjun" src="./images/photo/wisata-air-terjun.jpg">
        </a-assets>
        <!-- handle unknown marker -->
        <a-marker type="unknown">
            <a-box depth="1" height="1" width="1" position="0 0.5 0" material="opacity: 0.5; side:double; color:purple;"></a-box>
        </a-marker>

        handle hiro marker
        <a-marker preset="hiro">
            <a-entity gltf-model="#drone" animation-mixer></a-entity>
        </a-marker>

        <!-- handle kanji marker -->
        <a-marker preset="kanji">
            <a-entity gltf-model="#cookie"></a-entity>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type="barcode" value="0">
            <a-box position="0 0.5 0" material="opacity: 0.5; side: double;color:red;">
                <a-torus-knot radius="0.26" radius-tubular="0.05"></a-torus-knot>
            </a-box>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type="barcode" value="1">
            <a-entity gltf-model="#roti"></a-entity>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type="barcode" value="2">
            <a-plane width="1" height="1" position="0 0 0" rotation="-90 0 0" color="green">
                <a-gltf-model src="#motorbike" rotation="90 0 0" position="0 -0.2 0.2" scale="0.5 0.5 0.5"></a-gltf-model>
            </a-plane>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type="barcode" value="3">
            <a-plane width="1" height="1" position="0 0 0" rotation="-90 0 0" color="white">
                <a-gltf-model src="#helmet" rotation="0 0 0" position="0 0 0" scale="0 0 0.5"></a-gltf-model>
            </a-plane>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type="barcode" value="4">
            <a-plane width="1" height="1" position="0 0 0" rotation="-90 0 0" color="cyan">
                <a-gltf-model src="#skull" rotation="90 0 0" position="0 -0.2 1" scale="0.5 0.5 0.5"></a-gltf-model>
            </a-plane>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type="barcode" value="5">
            <a-image src="#bougenville" rotation="-90 0 0" width="2" height="1">
                <a-entity position="0 -2.5 0" text-geometry="value: Perpustakaan Sekolah Alam;  style: italic; size: 0.4; weight: bold; height: 0;" material="shader: flat; color: blue" align="center"></a-entity>
            </a-image>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type="barcode" value="6">
            <a-image src="#kio" rotation="-90 0 0" width="2" height="1"></a-image>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type="barcode" value="7">
            <a-plane width="1" height="1" position="0 0 0" rotation="-90 0 0" color="white" src="#mahasiswa">
                <a-text value="Bunga" color="#111" position="0 -0.7 0" align="center"></a-text>
                <a-sphere color="blue" position="-0.7 -0.7 0" radius="0.2"></a-sphere>
                <a-sphere color="red" position="0.7 -0.7 0" radius="0.2"></a-sphere>
            </a-plane>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type="barcode" value="8">
            <a-plane width="1" height="1" position="0 0 0" rotation="-90 0 0" color="white" src="#airterjun">
                <a-torus-knot radius="0.06" radius-tubular="0.05" position="0.7 -0.7 0">
                </a-torus-knot>
                <a-torus-knot radius="0.06" radius-tubular="0.05" position="-0.7 -0.7 0">
                </a-torus-knot>
            </a-plane>
        </a-marker>

        <!-- handle custom marker -->
        <a-marker preset="custom" type="pattern" url="./marker/datamatrix-1234567890/marker-datamatrix-1234567890.patt">
            <a-image src="#kio" rotation="-90 0 0" width="1" height="1" position="-1 0 -1"></a-image>
        </a-marker>

        <!-- handle custom marker -->
        <a-marker preset="custom" type="pattern" url="./marker/unila/pattern-Unila-warna.patt">
            <a-image src="#airterjun" rotation="-90 0 0" width="1" height="1" position="-1 0 -1"></a-image>
        </a-marker>

        <!-- add a simple camera -->
        <a-entity camera></a-entity>
    </a-scene>
</body>

</html>