-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathqr.html
56 lines (41 loc) · 3.01 KB
/
qr.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
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!-- Initialize the viewport -->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- Load the required dependencies: A-frame and AR.js -->
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<!-- This is to load the A-frame extras, that contain the required components that are used to show the animations -->
<!-- of the 3D model of the robot -->
<!-- This is a hack because at the time of writing there are some distortions in the provided visuals until the -->
<!-- system receives a resize event. The resize event must be triggered when everything has been loaded and the -->
<!-- camera has been initialized. All the events I tried didn't work, so in the end I resorted using a 3 seconds -->
<!-- time-out after the load event. When this problem will be fixed in the AR.js library, this hack won't be necessary -->
<!-- anymore -->
<script>
window.onload = function(){
setTimeout(function(){
var resizeEvent = window.document.createEvent('UIEvents');
resizeEvent.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);
}, 3000);
};
</script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<!-- a-scene defines the scene that we are agoing to use. After arjs= there are various options that can be customized -->
<!-- depending on your needs. For now just stick with these ones -->
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
<!-- Defines the marker that we are going to use. Notice that we are not providing the image file, but the -->
<!-- "compiled" .patt file that we got from the online tool. the marker MUST BE ACCESSIBLE VIA HTTPS -->
<a-marker preset='custom' type='pattern' url='https://skarredghost.com/AR/pattern-Skarredghost_marker_qr.patt'>
<!-- Here we define the content to show on the marker when it gets detected: a unit cube that lies on the floor and that is red -->
<a-image id="img1" position="0 0 0" rotation="90 180 0" width="" height="" opacity="1" src="https://i.imgur.com/kqf3g8j.png" transparent="true" alpha-test="0.2" shader="standard" scale="1 1 1" visible="" material="" geometry=""></a-image>
<a-image id="img2" position="0 0.2 0" rotation="270 0 0" width="" height="" opacity="1" src="https://i.imgur.com/LOeJNgY.png" transparent="true" alpha-test="0.2" shader="standard" scale="1 1 1" visible="" material="" geometry=""> </a-image>
<a-image id="img3" position="0 0.4 0" rotation="270 0 0" width="" height="" opacity="1" src="https://i.imgur.com/eJ3dqKi.png" transparent="true" alpha-test="0.2" shader="standard" scale="1 1 1" visible="" material="" geometry=""></a-image>
</a-marker>
<!-- Define the camera of the scene -->
<a-entity camera></a-entity>
</a-scene>
</body>