WebAR/first-index.html at master · ruhlmcu/WebAR · 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
<!doctype HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    </head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
    <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

    <body style='margin : 0px; overflow: hidden;'>
        <!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
        <a-scene embedded vr-mode-ui="enabled: false" arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">

        <a-assets>
            <a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf"></a-asset-item>
        </a-assets>

        <a-marker type='barcode' value='7'>
            <a-box position='0 0.5 0' color="yellow"></a-box>

        </a-marker>

        <a-marker id="animated-marker" type='barcode' value='6'>
          <!-- Textured plane parallel to ground. -->
          <!--a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane -->
          <a-plane height="100" width="100" rotation="-90 0 0"
         color="#93648D"></a-plane>
            <a-entity
                animation-mixer
                gltf-model="#animated-asset"
                scale="3 3 3">
            </a-entity>
        </a-marker>

        <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>