Hugging Face's logo

Spaces:
awacke1
/
HTML5-Aframe-3D-Maps
Running

App Files Community
awacke1 commited on
Commit
ec90c9b
•
1 Parent(s): 7e700ae

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +85 -11
index.html CHANGED
@@ -10,6 +10,21 @@
10
  height: 500px;
11
  width: 800px;
12
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </style>
14
  </head>
15
  <body>
@@ -17,20 +32,79 @@
17
  <a-entity environment="preset: forest"></a-entity>
18
 
19
  <!-- Define the polygons for Minnesota -->
20
- <a-entity position="-2.5 0 0">
21
- <a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1"></a-polygon>
22
- <a-polygon fill="#2D6C4E" vertices="0.5 1, 1 0, 1 1"></a-polygon>
23
- <a-polygon fill="#2D6C4E" vertices="0 0, 0 1, 0.5 1"></a-polygon>
24
- <a-polygon fill="#2D6C4E" vertices="0.5 0, 1 0, 0.5 1"></a-polygon>
 
 
 
 
 
 
 
 
25
  </a-entity>
26
- <a-entity position="2.5 0 0">
27
- <a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1"></a-polygon>
28
- <a-polygon fill="#2D6C4E" vertices="0 0, 0 1, 0.5 1"></a-polygon>
29
- <a-polygon fill="#2D6C4E" vertices="0.5 0, 1 0, 1 1"></a-polygon>
30
- <a-polygon fill="#2D6C4E" vertices="0.5 0, 0.5 1, 1 1"></a-polygon>
31
  </a-entity>
32
 
33
- <a-entity camera position="0 1.6 0"></a-entity>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  </a-scene>
35
  </body>
36
  </html>
 
 
 
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>
 
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
+
82
+ function updateVideoTexture() {
83
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
84
+ const texture = document.querySelector('#videoTexture');
85
+ texture.needsUpdate = true;
86
+ }
87
+
88
+ video.addEventListener('play', function() {
89
+ setInterval(updateVideoTexture, 16);
90
+ });
91
+ </script>
92
+
93
+ <script>
94
+ // Get the camera entity
95
+ const camera = document.querySelector('#camera');
96
+
97
+ // Define the zoom in and zoom out functions
98
+ function zoomIn() {
99
+ camera.setAttribute('position', {x: camera.getAttribute('position').x, y: camera.getAttribute('position').y - 5, z: camera.getAttribute('position').z});
100
+ }
101
+
102
+ function zoomOut() {
103
+ camera.setAttribute('position', {x: camera.getAttribute('position').x, y: camera.getAttribute('position').y + 5, z: camera.getAttribute('position').z});
104
+ }
105
+ </script>
106
  </a-scene>
107
  </body>
108
  </html>
109
+
110
+