-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (137 loc) · 4.63 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
<script>
window.onload = function () {
document.querySelector(".ayuda").addEventListener("click", function () {
alert(
"Para utilizar esta aplicacion, debes utilizar la camara de tu celular a traves de esta pagina web y escanear los codigos QRs que estan disponibles en orbitars.github.io acerca tu camara a los distintos qrs disponibles y veras como estos se muestran como modelos 3D"
);
});
};
</script>
<style>
.buttons {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5em;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.boton {
margin: 1em;
padding: 0.25em;
border-radius: 4px;
border: none;
background: white;
color: black;
width: 4em;
height: 2em;
}
</style>
</head>
<body style="margin: 0; overflow: hidden">
<div class="buttons">
<button class="boton ayuda">Ayuda</button>
</div>
<a-scene
vr-mode-ui="enabled: false;"
loading-screen="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
id="scene"
embedded
gesture-detector
>
<a-assets>
<a-asset-item
id="earth-asset"
src="assets/models/earth/asset.gltf"
></a-asset-item>
<a-asset-item
id="mars-asset"
src="assets/models/mars/asset.gltf"
></a-asset-item>
<a-asset-item
id="satelite-asset"
src="assets/models/satelite/asset.gltf"
></a-asset-item>
<a-asset-item
id="dccin-asset"
src="assets/models/dccin/DCCinPose.gltf"
></a-asset-item>
</a-assets>
<!-- Para la implementación de los marcadores y modelos se hizo uso de la herramineta: https://ar-js-org.github.io/studio/-->
<!-- El modelo Earth fue obtenido de https://poly.google.com/ y fue desarrollado por Robert Mirabelle-->
<a-marker
id="earth-marker"
type="pattern"
preset="custom"
url="assets/markers_patt/marker_earth.patt"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
id="markerA"
>
<a-entity
id="dccin-model"
scale="0.020583155377681475 0.020583155377681475 0.020583155377681475"
animation-mixer="loop: repeat"
gltf-model="#dccin-asset"
class="clickable"
gesture-handler
></a-entity>
</a-marker>
<!-- El modelo Mars fue obtenido de https://poly.google.com/ y fue desarrollado por Kyle Clark-->
<a-marker
id="mars-marker"
type="pattern"
preset="custom"
url="assets/markers_patt/marker_mars.patt"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
id="markerB"
>
<a-entity
id="mars-model"
scale="0.002099526312316072 0.002099526312316072 0.002099526312316072"
animation-mixer="loop: repeat"
gltf-model="#mars-asset"
class="clickable"
gesture-handler
></a-entity>
</a-marker>
<!-- El modelo Satelite fue obtenido de https://poly.google.com/ y fue desarrollado por Anonimo-->
<a-marker
id="satelite-marker"
type="pattern"
preset="custom"
url="assets/markers_patt/marker_satelite.patt"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
id="markerA"
>
<a-entity
id="satelite-model"
scale="0.04159623059548553 0.04159623059548553 0.04159623059548553"
animation-mixer="loop: repeat"
gltf-model="#satelite-asset"
class="clickable"
gesture-handler
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>