-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (76 loc) · 3.03 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- AR engine that updates the visibility and positions of a-entity -->
<link rel="shortcut icon" href="#">
<!-- mindar and aframe library hosted in cdn to build a web AR application! -->
<script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-image-aframe.prod.js"></script>
<!-- detect click event -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const clickCat = document.querySelector('#catsModel');
// detect click event
clickCat.addEventListener("click", event => {
console.log("catsModel click");
});
});
</script>
</head>
<body>
<a-scene
mindar-image="imageTargetSrc: ./targets.mind; maxTrack: 2"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
>
<!-- Property mindar-image : where is the compiled .mind file -->
<!-- Property maxTrack: maximum number of target that will be tracked simultaneously. Default is 1. -->
<!-- Impact on performance! Avoid tracking many targets at the same time. -->
<a-camera
position="0 0 0"
look-controls="enabled: false"
cursor="fuse: false; rayOrigin: mouse;"
raycaster="far: ${customFields.libVersion}; objects: .clickable"
></a-camera>
<!-- cursor and raycaster to detect is when the user click/touch a certain elements -->
<a-assets>
<a-asset-item
id="catsModel"
src="./assets/pop_cat/scene.gltf"
></a-asset-item>
<a-asset-item
id="avocadoModel"
src="assets/avacado/"
></a-asset-item>
</a-assets>
<!-- a-entity is a object that shows on top of the target image. -->
<!-- Property mindar-image-target: tells the engine to detect and track a particular image target. -->
<!-- The targetIndex is always 0, if your targets.mind contains only a single image. -->
<!-- Multi-Targets -->
<!-- two <a-entity>, with different targetIndex. -->
<a-entity mindar-image-target="targetIndex: 0">
<a-gltf-model
class="clickable"
rotation="0 0 0 "
position="0 -0.25 0"
scale="0.05 0.05 0.05"
src="#catsModel"
animation-mixer
>
</a-entity>
<a-entity mindar-image-target="targetIndex: 1">
<a-gltf-model
rotation="0 0 0 "
position="0 -0.25 0"
scale="0.05 0.05 0.05"
src="#avocadoModel"
animation-mixer
>
</a-entity>
</a-scene>
</body>
</html>