soda-ar/index.html at master · fedorinoGore/soda-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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>AR Demo</title>
</head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<!-- <script>
	AFRAME.registerComponent('registerevents', {
		init: function () {
            let marker = this.el

			marker.addEventListener('markerFound', function() {
                console.log('%cmarkerFound', 'color:green;font-style:italic;font-weight:600;')
                const video = document.getElementById('mondamin-video')
                video.play()
			});

			marker.addEventListener('markerLost', function() {
                console.log('%cmarkerLost', 'color:orange;font-style:italic;font-weight:600;')
                const video = document.getElementById('mondamin-video')
                video.pause()
			});
		}
	});
</script> -->
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded vr-mode-ui="enabled: false;" render='antialias: true; alpha: true; precision: medium;' arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 4x4_BCH_13_5_5'>
        <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-asset-item id="animated-asset" src="/soda-ar/models/food_box/scene.gltf"></a-asset-item> -->
            <!-- <video id="mondamin-video" crossorigin="anonymous" loop="false" playsinline webkit-playsinline poster="/soda-ar/img/packshot.jpg" src="/soda-ar/video/mondamin.mp4"></video> -->
            <img id="fondan-img" src="/soda-ar/img/fondan.jpg">
            <img id="polba-img" src="/soda-ar/img/polba.jpg">
            <img id="soup-img" src="/soda-ar/img/soup.jpeg">
            <img id="packshot-img" src="/soda-ar/img/packshot.jpg">
        </a-assets>

        <a-marker id="animated-marker" type='barcode' value='6' registerevents>
            <!-- <a-entity
                gltf-model="#animated-asset"
                scale="40 40 40">
            </a-entity> -->
            <!-- <a-video src="#mondamin-video" width="8" height="4.5" position="0 0 0" rotation="90 0 0" play="true"></a-video> -->
            <a-entity>
                <a-image src="#soup-img" width="2" height="2" position="-2.1 0 0" rotation="90 0 0"></a-image>
            </a-entity>
            <a-entity>
                <a-image src="#polba-img" width="2" height="2" position="0 0 0" rotation="90 0 0"></a-image>
            </a-entity>
            <a-entity>
                <a-image src="#fondan-img" width="2" height="2" position="2.1 0 0" rotation="90 0 0"></a-image>
            </a-entity>
            <!-- <a-entity>
                <!-- <a-image src="#packshot-img" width="2" height="2" position="0 0 2.5" rotation="90 0 0"></a-image> -->
                <!-- <a-text value="Кукурузный крахмал" align="center" width="2" rotation="90 0 0" color="#000000" position="0 0 2.1" geometry="primitive:plane"></a-text> -->
            </a-entity> -->
        </a-marker>

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