forked from stemkoski/AR.js-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathappleandroid.html
129 lines (115 loc) · 4.18 KB
/
appleandroid.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
<!doctype HTML>
<html>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<script src="js/aframe-text-geometry-component.min.js"></script>
<script>
function isAndroid() {
return /Android/i.test(navigator.userAgent);
}
AFRAME.registerComponent('vidhandler', {
init: function () {
if (isAndroid()) {
this.toggle = false;
this.vid = document.querySelector("#vidtest");
this.vid.pause();
} else {
// Falls kein Android-Gerät, das Video komplett entfernen
const vidEntity = document.querySelector("#vidtest");
if (vidEntity) {
vidEntity.parentNode.removeChild(vidEntity);
}
}
},
tick:function(){
if (isAndroid() && this.el.object3D.visible == true){
if(!this.toggle){
this.toggle = true;
this.vid.play();
}
} else if (isAndroid()) {
this.toggle = false;
this.vid.pause();
}
}
});
</script>
<body style="margin: 0px; overflow: hidden;">
<a-scene embedded vr-mode-ui="enabled: false;"
arjs="debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
renderer= "precision: medium; colorManagement: true;">
<a-assets>
<a-asset-item id="dom" src="models/dom/A95XNTJMFCEC0P92ZM4PJXDN6.gltf"></a-asset-item>
<a-asset-item id="else" src="models/goldelse/model.gltf"></a-asset-item>
<a-asset-item id="else-obj" src="models/goldelse_obj/model.obj"></a-asset-item>
<a-asset-item id="else-mtl" src="models/goldelse_obj/model.mtl"></a-asset-item>
<a-asset-item id="bbtor" src="models/bbtor/model.gltf"></a-asset-item>
<a-asset-item id="TV" src="models/TVTower/model.gltf"></a-asset-item>
<a-asset-item id="tv-obj" src="models/tvtowerobj/model.obj"></a-asset-item>
<a-asset-item id="tv-mtl" src="models/tvtowerobj/model.mtl"></a-asset-item>
<video id="vidtest" loop="true" src="videos/rick.mp4" crossorigin></video>
<img id="imgtest" src="images/kuehlbox.jpg">
<a-asset-item id="exoFont" src="fonts/exoBlack.typeface.json"></a-asset-item>
<img id="pixels" src="images/pixels.png" />
<img id="img360" src="images/360_topaz.png" />
</a-assets>
<a-marker type="barcode" value="0">
<a-entity position="0 0 0"
rotation="0 0 0"
scale="0.60 0.60 0.60"
gltf-model="#dom" >
</a-entity>
</a-marker>
<a-marker type="barcode" value="10">
<a-entity position="0 0 0"
rotation="270 90 0"
scale="0.50 0.50 0.50"
obj-model="obj: #else-obj; mtl: #else-mtl" >
</a-entity>
</a-marker>
<a-marker type="barcode" value="15">
<a-entity position="0 0 0"
rotation="270 90 0"
scale="0.30 0.30 0.30"
gltf-model="#bbtor" >
</a-entity>
</a-marker>
<a-marker type="barcode" value="9">
<a-entity position="0 0 0"
rotation="0 0 0"
scale="0.009 0.009 0.009"
obj-model="obj: #tv-obj; mtl: #tv-mtl">
</a-entity>
</a-marker>
<a-marker type="barcode" value="1">
<a-plane position="0 0 0"
rotation="-90 0 0"
material="src: #imgtest;">
</a-plane>
</a-marker>
<a-marker type="barcode" value="2" vidhandler>
<a-plane position='0 0 0'
rotation="-90 0 0"
material='src:#vidtest'>
</a-plane>
</a-marker>
<!-- 3D text -->
<a-marker type="barcode" value="3">
<a-entity text-geometry="value: Ein AR Marker. ; font: #exoFont; size: 0.2;"
material="color: blue; src: #pixels; repeat: 0.5 0.5;"
rotation="-90 0 0">
</a-entity>
</a-marker>
<a-marker type="barcode" value="11">
<a-link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" image="#img360" title="" peekmoder=true rotation="-90 0 0">
</a-link>
</a-marker>
<a-marker type="barcode" value="12">
<a-link image="#img360" title="Minibar" rotation="-90 0 0">
</a-link>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>