Multimedia/index.html at main · Greekforce1821/Multimedia · GitHub

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!DOCTYPE html>
<html class="a-fullscreen" lang="en">
<head>
  <meta charset="UTF-8">
  <meta aframe-injected="" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no,user-scalable=no,minimal-ui,viewport-fit=cover">
  <meta aframe-injected="" name="mobile-web-app-capable" content="yes">
  <meta aframe-injected="" name="theme-color" content="black">
  <meta name="robots" content="index, follow">
  <meta name="description" content="Multimedia - A-Frame Task">
  <meta name="keywords" content="A-Frame, VR, 3D">
  <meta name="author" content="Spyridon Eftychios Kokotos">
  <title>Multimedia - A-Frame Task</title>
  <script src="./src/scripts/aframe.min.js"></script>
  <script src="./src/scripts/aframe-extras.min.js"></script>
  <script src="./src/scripts/a-water.min.js"></script>
  <script src="./src/scripts/aframe-cursor-animator.js"></script>
  <script src="./src/scripts/aframe-raycaster.js"></script>
  <script src="./src/scripts/a-frame-environment-component.min.js"></script>
  <script src="./src/scripts/day-night-toggle.js"></script>
  <script src="./src/scripts/mistralUI.js" defer></script>
  <script src="./src/scripts/mormugaoUI.js"></script>
  <script src="./src/scripts/vclassUI.js"></script>
  <script src="./src/scripts/poseidonUI.js"></script>
  <script src="./src/scripts/greek-flag.js"></script>
  <script src="./src/scripts/indian-flag.js"></script>
  <script src="./src/scripts/uk-flag.js"></script>
  <script src="./src/scripts/france-flag.js"></script>
  <style type="text/css" data-href="./src/css/aframe.css"></style>
  <style type="text/css" data-href="./src/css/rStats.css"></style>
  <style type="text/css" data-href="./src/css/styles.css"></style>
  <link rel="stylesheet" href="./src/css/help.css">
  <link rel="stylesheet" href="./src/css/mistralUI.css">
  <link rel="stylesheet" href="./src/css/mormugaoUI.css">
  <link rel="stylesheet" href="./src/css/vclassUI.css">
  <link rel="stylesheet" href="./src/css/poseidonUI.css">
  <link rel="stylesheet" href="./src/css/welcome.css">
  <link rel="stylesheet" href="./src/css/array.css">
  <link rel="stylesheet" href="./src/css/info.css">
  <link rel="icon" href="./src/favicon/favicon.ico" type="image/x-icon">

</head>
<body>

<!--Properties for the Help Button-->
<a id="infoIcon">
  <img src="./src/images/info.png" alt="Info" style="width: 50px; height: 50px;">
</a>

<!--Properties for the Information Button-->
<a id="helpIcon">
  <img src="./src/images/help.png" alt="Help" style="width: 50px; height: 50px;">
</a>

<!--Properties for the Info UI-->
<div id="infoUI" style="display:none;">
  <a href="https://ionio.gr" target="_blank">
    <img class="logoTopLeft" src="./src/images/uni-logo.png" alt="Logo" id="logoTopLeft">
  </a>
  <a href="https://di.ionio.gr" target="_blank">
    <img class="logoTopRight" src="./src/images/di.jpg" alt="Logo" id="logoTopRight">
  </a>
  <div id="infoMessage">
    <h2>Πληροφορίες Εφαρμογής</h2>
    <p>Η εφαρμογή αποτελεί μια πολυμεσική και καινοτόμα πλατφόρμα, σχεδιασμένη να προσφέρει μια μοναδική εμπειρία εξερεύνησης μέσα σε έναν πλούσιο, εικονικό κόσμο.
       Με επίκεντρο τον χρήστη και τη διαδραστικότητα, η εφαρμογή ενσωματώνει αρμονικά στοιχεία πολιτισμού, εκπαίδευσης και ψυχαγωγίας, λειτουργώντας ως μια μικρή
       προσομοίωση ενός ναυτικού μουσείου.</p>

    <!--Properties for the Application Info Table-->
    <table id="featuresTable">
      <thead>
        <tr>
          <th>Αριθμός</th>
          <th>Λειτουργίες</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>
            <strong>Πληροφορίες για τα πλοία:</strong> Παρέχονται αναλυτικές περιγραφές για κάθε πλοίο, καλύπτοντας την ιστορική του σημασία, την τεχνολογική του κατασκευή και τη χρήση του. Αυτές οι πληροφορίες εμπνέονται από εκθέσεις ενός ναυτικού μουσείου.
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td>
            <strong>Ακρόαση εθνικών ύμνων:</strong> Δίνει τη δυνατότητα στον χρήστη να γνωρίσει και να εκτιμήσει την πολιτισμική κληρονομιά κάθε έθνους μέσα από τη μουσική. Αυτή η λειτουργία ενισχύει τη συνολική εμπειρία με πολιτισμική διάσταση.
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>
            <strong>Προβολή βίντεο:</strong> Κάθε πλοίο συνοδεύεται από βίντεο που παρουσιάζουν λεπτομέρειες για την κατασκευή, τη λειτουργία και την αισθητική του, εμπλουτίζοντας την εμπειρία με οπτικοακουστικό περιεχόμενο υψηλής ποιότητας.
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td>
            <strong>Δυνατότητα κίνησης:</strong> Τα πλοία μπορούν να κινηθούν, επιτρέποντας στον χρήστη να αλληλεπιδρά δυναμικά με το εικονικό περιβάλλον. Αυτή η λειτουργία μετατρέπει την εφαρμογή από στατική σε ζωντανή εμπειρία.
          </td>
        </tr>
      </tbody>
    </table>

  <p>Η εφαρμογή συνδυάζει την τεχνολογία, την αισθητική και τη γνώση, προσφέροντας μια πλούσια εμπειρία που προσκαλεί τον χρήστη να ανακαλύψει, να μάθει και να ψυχαγωγηθεί.</p>
  <button id="closeInfo">Κλείσιμο Πληροφοριών</button>
  </div>
</div>


<!--Properties for the Help UI-->
<div id="helpUI" style="display:none;">
  <div id="helpMessage">
    <a href="https://ionio.gr" target="_blank"> <img class="logoTopLeft" src="./src/images/uni-logo.png" alt="Logo" id="logoTopLeft"></a>
    <a href="https://di.ionio.gr" target="_blank"> <img class="logoTopRight" src="./src/images/di.jpg" alt="Logo" id="logoTopRight"></a>
    <h2>Βοήθεια & Υποστήριξη</h2>
    <p> Καλώς ορίσατε στην σελίδα βοήθειας & υποστήριξης</p>
    <p> Για την σωστή λειτουργία των 3D κινήσεων, ήχων καθώς και διάδρασης θα πρέπει να ακολουθήσετε τα παρακάτω:</p>

    <!--Properties for the Array-->
    <table id="helpTable">
      <tr>
        <td>1</td>
        <td>Χρησιμοποιείστε την σελίδα μέσω υπολογιστή και όχι κινητού για να μπορείτε να κινηθείτε στον χώρο.</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Περιπλανηθείτε στον χώρο με τα πλήκτρα W,A,S,D ή με τα γνωστά βελάκια.</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Για την καλύτερη απόδοση των γραφικών, καλό θα είναι να ενεργοποιήσετε εκ των προτέρων την επιλογή: "Use hardware acceleration when available"</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Σε περίπτωση που παρατηρήσετε "κολλήματα" και frame drops κατά την περιήγησή σας, φορτώστε ξανά την σελίδα, περιηγηθείτε σε όλο τον χάρτη και αφήστε τα κολλήματα να ξεκολλήσουν. Αυτό συμβαίνει γιατί είναι μεγάλα τα μοντέλα και η κάρτα γραφικών του φυλλομετρητή σας ζορίζεται.</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Επειδή η σελίδα εκπέμπει ηχητικά εφέ, θα πρέπει να έχετε ενεργοποιημένο το <bold>autoplay</bold> & τον <bold> ήχο</bold> για να τα ακούσετε.</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Eπειδή τα 3D μοντέλα είναι "ευαίσθητα" με το framework A-Frame, παρακαλείστε, να δώσετε ιδιαίτερη προσοχή στα κλίκ που κάνετε στα αντικείμενα.</td>
      </tr>
    </table>

    <p>Σε περίπτωση που έρθετε αντιμέτωποι με κάποιο νέο σφάλμα, παρακαλώ, να επικοινωνήσετε με τον υπεύθυνο υλοποίησης.</p>

    <p>Πατήστε το παρακάτω κουμπί για να πραγματοποιήσετε έξοδο από το μενού βοήθειας.</p>
    <button id="closeHelp">Κλείσιμο Βοήθειας</button>
  </div>
</div>

<!--Properties of the Help Script-->
<script>
  document.getElementById('helpIcon').addEventListener('click', function () {
    document.getElementById('helpUI').style.display = 'block';
    document.getElementById('welcomeUI').style.display = 'none';
  });

  document.getElementById('closeHelp').addEventListener('click', function () {
    document.getElementById('helpUI').style.display = 'none';
  });
</script>

<!--Properties of the Info Script-->
<script>
  document.getElementById('infoIcon').addEventListener('click', function () {
    document.getElementById('infoUI').style.display = 'block';
    document.getElementById('welcomeUI').style.display = 'none';
  });

  document.getElementById('closeInfo').addEventListener('click', function () {
    document.getElementById('infoUI').style.display = 'none';
  });
</script>


  <!--Properties for the Welcome Message -->
  <div id="welcomeUI">
    <div id="welcomeMessage">
      <a href="https://ionio.gr" target="_blank"> <img class="logoTopLeft" src="./src/images/uni-logo.png" alt="Logo" id="logoTopLeft"></a>
      <a href="https://di.ionio.gr" target="_blank"> <img class="logoTopRight" src="./src/images/di.jpg" alt="Logo" id="logoTopRight"></a>
      <img src="./src/images/main.jpg" alt="Main Image" style="width: 300px; height: 300px; border-radius: 50%; display: block; margin: 0 auto; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
      <h2>Καλώς ορίσατε!</h2>
      <p>Πατήστε το παρακάτω κουμπί για να εισέλθετε στον εικονικό κόσμο και να εξερευνήσετε τη διαδραστική εμπειρία!</p>
      <button id="enterVR">Είσοδος</button>
    </div>
    <footer id="welcomeFooter">
      <div class="footer-content">
        <p>Ιόνιο Πανεπιστήμιο | Τμήμα Πληροφορικής | Μάθημα: Πολυμέσα | Ακαδημαϊκό έτος: 2024 - 2025 | Κέρκυρα |</p>
      </div>
      <div class="footer-bottom">
        <p>Powered by: A-Frame</p>
        <p>© Σπυρίδων Ευτύχιος Κοκοτός | inf2021098 | Email: skokotos@ionio.gr / inf2021098@ionio.gr © </p>
      </div>
    </footer>
  </div>

  <!--Properties for the Background Audio -->
  <audio id="backgroundAudio" autoplay loop>
    <source src="./src/audio/ambient-background.mp3" type="audio/mpeg">
  </audio>

  <!--Properties for the Background Audio Script -->
  <script>
  document.addEventListener("DOMContentLoaded", () => {
    const backgroundAudio = document.getElementById("backgroundAudio");
    backgroundAudio.volume = 0.01;
    backgroundAudio.play();
   });
  </script>


  <!--Properties of the Welcome Script-->
  <script>
    document.getElementById('enterVR').addEventListener('click', function () {
    document.getElementById('welcomeUI').style.display = 'none';
    });
  </script>

  <!--Properties for the Environment-->
  <a-scene environment="preset: default; grid: none; fog: none; lighting: none; shadow: none; ground: none; groundYScale: 0; groundTexture: none; horizonColor: #000; skyColor: #000; lighting: none; width: 100; height: 100;">

  <!--Properties for the Camera-->
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>

  <!--Properties for the Fog-->
  <a-scene fog="type: linear; color: #a3d0ed; near:20; far:55;">

  <!--Properties for Ocean floor-->
  <a-ocean width="100" depth="100" density="30" opacity="1" position="0 0.9 0" shadow="receive: true; cast: true;"></a-ocean>


  <!--Properties for the Lighthouse-->
  <a-entity position="-40 1.3 -36" scale="4.5 4.5 4.5" rotation="0 0 0" gltf-model="#lighthouse" id="#lighthouse" clickable="" day-night-toggle=""></a-entity>

  <!--Properties for the Seagulls -->
  <a-entity position="-57 5 -50" scale="1 1 1" rotation="0 0 0" gltf-model="#seagulls" id="#seagulls" clickable="" animation-mixer=""></a-entity>

  <!--Properties for the Mistral | France -->
  <a-entity position="30 -1 -36" scale="4.5 4.5 4.5" rotation="0 360 0" gltf-model="#mistral" id="mistralEntity" clickable="" mistral-ui=""></a-entity>

  <!-- Properties for the Mistral UI -->
  <div id="mistralUI" style="display: none;">
    <div id="mistralMessage">
      <h2>Mistral France Navy Boat</h2>
      <div id="mistralContent"></div>
      <div class="mistralButtonContainer">
        <button id="mistralInfoButton">Πληροφορίες</button>
        <button id="mistralPlaySoundButton">Aναπαραγωγή Βίντεο</button>
        <button id="mistralPhotoAlbumButton">Άλμπουμ Φωτογραφιών</button>
        <button id="mistralMoverButton">Κίνηση Σκάφους</button>
        <button id="mistralCloseButton">Έξοδος</button>
      </div>
    </div>
  </div>

  <!-- Properties for the Mistral Carousel Photo Album -->
  <div id="mistralCarousel" class="photo-carousel" style="display: none;">
    <div class="carousel-container">
      <button id="prevMistralBtn" class="carousel-btn">❮</button>
      <img id="mistralCarouselImage" class="carousel-image" src="" alt="Mistral Photo">
      <button id="nextMistralBtn" class="carousel-btn">❯</button>
    </div>
    <button id="closeMistralBtn" class="close-carousel">Κλείσιμο</button>
  </div>

  <!--Properties for the Flag of France -->
  <a-entity position="23.5 -0.3 -20" scale="38 38 38" rotation="0 -90 0" gltf-model="#flag_france" france-flag="" animation-mixer="" clickable=""></a-entity>

  <!--Properties for the HS Poseidon | Greece -->
  <a-entity position="45 -1 -36" scale="0.5 0.5 0.5" rotation="0 360 0" gltf-model="#poseidon" id="poseidonEntity" clickable="" poseidon-ui=""></a-entity>

  <!-- Properties for the Poseidon UI -->
  <div id="poseidonUI" style="display: none;">
    <div id="poseidonMessage">
      <h2>Poseidon Greek Navy Ship</h2>
      <div id="poseidonContent"></div>
      <div class="poseidonButtonContainer">
        <button id="poseidonInfoButton">Πληροφορίες</button>
        <button id="poseidonPlaySoundButton">Aναπαραγωγή Βίντεο</button>
        <button id="poseidonPhotoAlbumButton">Άλμπουμ Φωτογραφιών</button>
        <button id="poseidonMoverButton">Κίνηση Σκάφους</button>
        <button id="poseidonCloseButton">Έξοδος</button>
      </div>
    </div>
  </div>

  <!-- Properties for the Poseidon Carousel Photo Album -->
  <div id="poseidonCarousel" class="photo-carousel" style="display: none;">
    <div class="carousel-container">
      <button id="prevposeidonBtn" class="carousel-btn">❮</button>
      <img id="poseidonCarouselImage" class="carousel-image" src="" alt="Mistral Photo">
      <button id="nextposeidonBtn" class="carousel-btn">❯</button>
    </div>
    <button id="closeposeidonBtn" class="close-carousel">Κλείσιμο</button>
  </div>

  <!--Properties for the Pier -->
  <a-entity position="40 -0.3 -33" scale="4 4 4" rotation="0 0 0" gltf-model="#pier" id="#pier"></a-entity>

  <!--Properties for the Flag of Greece -->
  <a-entity position="39.5 -0.3 -20" scale="3 3 3" rotation="0 -90 0" gltf-model="#flag_greece" animation-mixer="" greek-flag=""></a-entity>

  <!-- Properties for the Lighthouse Light -->
  <a-light id="lighthouseLight" type="spot" position="-42.1 21 -28.5" intensity="0" angle="40" color="#ffcc00" castShadow="true" target="#lighthouse" animation="property: rotation; to: 0 360 0; loop: true; dur: 7000"></a-light>

  <!--Properties for the V Class Destroyer | United Kingdom -->
  <a-entity position="0 0.8 -33" scale="0.5 0.5 0.5" rotation="0 0 0" gltf-model="#british_v_class" id="vclassEntity"  clickable="" vclass-ui=""></a-entity>

  <!-- Properties for the V Class Destroyer UI -->
  <div id="vclassUI" style="display: none;">
    <div id="vclassMessage">
      <h2>V Class Destroyer British Navy Ship</h2>
      <div id="vclassContent"></div>
      <div class="vclassButtonContainer">
        <button id="vclassInfoButton">Πληροφορίες</button>
        <button id="vclassPlaySoundButton">Aναπαραγωγή Βίντεο</button>
        <button id="vclassPhotoAlbumButton">Άλμπουμ Φωτογραφιών</button>
        <button id="vclassMoverButton">Κίνηση Σκάφους</button>
        <button id="vclassCloseButton">Έξοδος</button>
      </div>
    </div>
  </div>

  <!-- Properties for the V Class Destroyer Carousel Photo Album -->
  <div id="vclassCarousel" class="photo-carousel" style="display: none;">
    <div class="carousel-container">
      <button id="prevvclassBtn" class="carousel-btn">❮</button>
      <img id="vclassCarouselImage" class="carousel-image" src="" alt="V Class Destroyer Photo">
      <button id="nextvclassBtn" class="carousel-btn">❯</button>
    </div>
    <button id="closevclassBtn" class="close-carousel">Κλείσιμο</button>
  </div>

  <!--Properties for the Flag of United Kingdom -->
  <a-entity position="-5.5 0 -20" scale="3 3 3" rotation="0 -90 0" gltf-model="#flag_uk" id="#flag_uk" uk-flag="" animation-mixer=""></a-entity>

  <!--Properties for the INS Mormugao | India -->
  <a-entity position="15 0.5 -33" scale="5 5 5" rotation="0 -90 0" gltf-model="#mormugao" id="mormugaoEntity" clickable="" mormugao-ui=""></a-entity>

 <!-- Properties for the Mormugao UI -->
 <div id="mormugaoUI" style="display: none;">
  <div id="mormugaoMessage">
    <h2>Mormugao Indian Navy Ship</h2>
    <div id="mormugaoContent"></div>
    <div class="mormugaoButtonContainer">
      <button id="mormugaoInfoButton">Πληροφορίες</button>
      <button id="mormugaoPlaySoundButton">Aναπαραγωγή Βίντεο</button>
      <button id="mormugaoPhotoAlbumButton">Άλμπουμ Φωτογραφιών</button>
      <button id="mormugaoMoverButton">Κίνηση Σκάφους</button>
      <button id="mormugaoCloseButton">Έξοδος</button>
    </div>
  </div>
</div>

<!-- Properties for the Mormugao Carousel Photo Album -->
<div id="mormugaoCarousel" class="photo-carousel" style="display: none;">
  <div class="carousel-container">
    <button id="prevmormugaoBtn" class="carousel-btn">❮</button>
    <img id="mormugaoCarouselImage" class="carousel-image" src="" alt="Mormugao Photo">
    <button id="nextmormugaoBtn" class="carousel-btn">❯</button>
  </div>
  <button id="closemormugaoBtn" class="close-carousel">Κλείσιμο</button>
</div>

  <!--Properties for the Flag of India -->
  <a-entity position="9 0 -20" scale="0.008 0.008 0.008" rotation="0 -90 0" gltf-model="#flag_india" indian-flag="" animation-mixer=""></a-entity>

  <!--Properties for the Pier -->
  <a-entity position="-5 -0.3 -33" scale="4 4 4" rotation="0 0 0" gltf-model="#pier" id="#pier"></a-entity>

  <!--Properties for the Pier -->
  <a-entity position="24 -0.3 -33" scale="4 4 4" rotation="0 0 0" gltf-model="#pier" id="#pier"></a-entity>

  <!--Properties for the Pier -->
  <a-entity position="11 -0.3 -33" scale="4 4 4" rotation="0 0 0" gltf-model="#pier" id="#pier"></a-entity>


    <!--Properties for the Assets-->
    <a-assets>
      <img id="skyTexture" src="./src/images/sky.jpg">
      <a-asset item="" id="lighthouse" src="./src/models/lighthouse.glb"></a-asset>
      <a-asset item="" id="mistral" src="./src/models/mistral.glb"></a-asset>
      <a-asset item="" id="pier" src="./src/models/pier.glb"></a-asset>
      <a-asset item="" id="house" src="./src/models/house.glb"></a-asset>
      <a-asset item="" id="seagulls" src="./src/models/seagulls.glb"></a-asset>
      <a-asset item="" id="british_v_class" src="./src/models/british_v-class_destroyer_ww1.glb"></a-asset>
      <a-asset item="" id="mormugao" src="./src/models/bengaluru_class_destroyer_d67.glb"></a-asset>
      <a-asset item="" id="poseidon" src="./src/models/type_209.glb"></a-asset>
      <a-asset item="" id="pier" src="./src/models/pier.glb"></a-asset>
      <a-asset item="" id="flag_greece" src="./src/models/scene.gltf"></a-asset>
      <a-asset item="" id="flag_france" src="./src/models/france_flag.glb"></a-asset>
      <a-asset item="" id="flag_india" src="./src/models/india_flag.glb"></a-asset>
      <a-asset item="" id="flag_uk" src="./src/models/uk.glb"></a-asset>
      <audio id="greek-horn" src="./src/audio/greece-anthem.mp3"></audio>
      <audio id="french-horn" src="./src/audio/france-anthem.mp3"></audio>
      <audio id="uk-horn" src="./src/audio/uk-anthem.mp3"></audio>
      <audio id="indian-horn" src="./src/audio/india-anthem.mp3"></audio>
    </a-assets>

  </a-scene>


</body>
</html>