-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (60 loc) · 2.82 KB
/
index.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
57
58
59
60
61
62
63
64
65
66
67
<!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">
<!-- https://aframe.io/releases/1.1.0/aframe.js -->
<script src="/resources/js/aframe.js"></script>
<!-- https://cdn.rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.js -->
<script src="/resources/js/aframe-ar.js"></script>
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
<script>
AFRAME.registerComponent('registerevents', {
init: function () {
var marker = this.el;
marker.addEventListener('markerFound', function() {
var markerId = marker.id;
console.log('! markerFound', markerId);
if(markerId === 'fin') {
var finModel = document.querySelector('#fin-model');
console.log(finModel.getAttribute('position'));
}
if(markerId === 'jaws') {
var finModelJaws = document.querySelector('#fin-model-jaws');
console.log(finModelJaws.getAttribute('position'));
}
});
marker.addEventListener('markerLost', function() {
var markerId = marker.id;
console.log('! markerLost', markerId);
});
}
});
</script>
</head>
<body style='margin : 0; overflow: hidden;'>
<a-scene embedded vr-mode-ui="enabled: false"
embedded arjs='sourceType: webcam; debugUIEnabled: true;'>
<a-plane rotation="-90 0 0"></a-plane>
<!-- Load shark fin asset -->
<a-assets>
<a-asset-item id="shark-fin" src="/resources/models/shark-fin.gltf"></a-asset-item>
</a-assets>
<!-- Specify marker pattern to identify -->
<a-marker id='jaws' preset='custom' type='pattern' url='https://incara.github.io/resources/patterns/jaws.patt' registerevents>
<!-- scale the model way down-->
<a-entity id='fin-model-jaws' position='0 0 0' scale="0.5 0.5 0.5">
<a-entity scale="0.05 0.05 0.05" gltf-model="#shark-fin"></a-entity>
</a-entity>
</a-marker>
<!-- Specify marker pattern to identify -->
<a-marker id='fin' preset='custom' type='pattern' url='https://incara.github.io/resources/patterns/fin.patt' registerevents>
<!-- scale the model way down-->
<a-entity id='fin-model' position='0 0 0' scale="0.5 0.5 0.5">
<a-entity scale="0.05 0.05 0.05" gltf-model="#shark-fin"></a-entity>
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>