Hugging Face's logo

Spaces:
rcajegas
/
HTML5-Aframe-3D-Maps1
Running

App Files Community
rcajegas commited on
Commit
99e1751
•
1 Parent(s): e2db0d5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +100 -24
index.html CHANGED
@@ -1,28 +1,104 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
 
 
 
 
 
 
 
 
 
 
 
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
 
 
 
 
 
 
 
 
 
 
 
 
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Minnesota Map</title>
6
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
7
+ <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
8
+ <style>
9
+ #canvas {
10
+ height: 500px;
11
+ width: 800px;
12
+ }
13
+ .button {
14
+ background-color: #222;
15
+ border: none;
16
+ color: white;
17
+ font-size: 16px;
18
+ padding: 10px 16px;
19
+ text-align: center;
20
+ text-decoration: none;
21
+ display: inline-block;
22
+ margin: 4px 2px;
23
+ cursor: pointer;
24
+ }
25
+ .link {
26
+ color: #8CEEEF;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <a-scene>
32
+ <a-entity environment="preset: forest"></a-entity>
33
 
34
+ <!-- Define the polygons for Minnesota -->
35
+ <a-entity position="0 0 -5">
36
+ <a-entity position="-2.5 0 0">
37
+ <a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1"></a-polygon>
38
+ <a-polygon fill="#2D6C4E" vertices="0.5 1, 1 0, 1 1"></a-polygon>
39
+ <a-polygon fill="#2D6C4E" vertices="0 0, 0 1, 0.5 1"></a-polygon>
40
+ <a-polygon fill="#2D6C4E" vertices="0.5 0, 1 0, 0.5 1"></a-polygon>
41
+ </a-entity>
42
+ <a-entity position="2.5 0 0">
43
+ <a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1"></a-polygon>
44
+ <a-polygon fill="#2D6C4E" vertices="0 0, 0 1, 0.5 1"></a-polygon>
45
+ <a-polygon fill="#2D6C4E" vertices="0.5 0, 1 0, 1 1"></a-polygon>
46
+ <a-polygon fill="#2D6C4E" vertices="0.5 0, 0.5 1, 1 1"></a-polygon>
47
+ </a-entity>
48
+ </a-entity>
49
 
50
+ <!-- Define the camera and buttons -->
51
+ <a-entity id="camera" camera position="0 50 0" look-controls>
52
+ <a-entity id="zoomIn" class="button" position="-2.5 0 0" rotation="0 0 180" onclick="zoomIn()">+</a-entity>
53
+ <a-entity id="zoomOut" class="button" position="2.5 0 0" onclick="zoomOut()">-</a-entity>
54
+ </a-entity>
 
55
 
56
+ <!-- Define a link to the video on each polygon -->
57
+ <a-entity position="0 0 -5">
58
+ <a-entity position="-2.5 0 0">
59
+ <a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1" material="src: #videoTexture"></a-polygon>
60
+ </a-entity>
61
+ <a-entity position="2.5 0 0">
62
+ <a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1" material="src: #videoTexture"></a-polygon>
63
+ <a-polygon fill="#2D6C4E" vertices="0 0, 0 1, 0.5 1" material="src: #videoTexture"></a-polygon>
64
+ <a-polygon fill="#2D6C4E" vertices="0.5 0, 1 0, 1 1" material="src: #videoTexture"></a-polygon>
65
+ <a-polygon fill="#2D6C4E" vertices="0.5 0, 0.5 1, 1 1" material="src: #videoTexture"></a-polygon>
66
+ </a-entity>
67
+ </a-entity>
68
+ <!-- Define the video texture -->
69
+ <video id="video" src="https://www.youtube.com/watch?v=2N83yzUcomc" loop></video>
70
+ <a-assets>
71
+ <video id="video" src="#video" loop></video>
72
+ <canvas id="videoTextureCanvas" width="512" height="512"></canvas>
73
+ <a-texture id="videoTexture" src="#videoTextureCanvas"></a-texture>
74
+ </a-assets>
75
 
76
+ <!-- Define the script to update the video texture -->
77
+ <script>
78
+ const video = document.querySelector('#video');
79
+ const canvas = document.querySelector('#videoTextureCanvas');
80
+ const ctx = canvas.getContext('2d');
81
+ function updateVideoTexture() {
82
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
83
+ const texture = document.querySelector('#videoTexture');
84
+ texture.needsUpdate = true;
85
+ }
86
+ video.addEventListener('play', function() {
87
+ setInterval(updateVideoTexture, 16);
88
+ });
89
+ </script>
90
+
91
+ <script>
92
+ // Get the camera entity
93
+ const camera = document.querySelector('#camera');
94
+ // Define the zoom in and zoom out functions
95
+ function zoomIn() {
96
+ camera.setAttribute('position', {x: camera.getAttribute('position').x, y: camera.getAttribute('position').y - 5, z: camera.getAttribute('position').z});
97
+ }
98
+ function zoomOut() {
99
+ camera.setAttribute('position', {x: camera.getAttribute('position').x, y: camera.getAttribute('position').y + 5, z: camera.getAttribute('position').z});
100
+ }
101
+ </script>
102
+ </a-scene>
103
+ </body>
104
+ </html>