Hugging Face's logo

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

App Files Community
rcajegas commited on
Commit
c31b72b
·
1 Parent(s): f1e553e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +24 -119
index.html CHANGED
@@ -1,123 +1,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>
105
- <!DOCTYPE html>
106
- <html>
107
- <head>
108
- <meta charset="utf-8" />
109
- <meta name="viewport" content="width=device-width" />
110
- <title>My static Space</title>
111
- <link rel="stylesheet" href="style.css" />
112
- </head>
113
- <body>
114
- <div class="card">
115
- <h1>Welcome to your static Space!</h1>
116
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
117
- <p>
118
- Also don't forget to check the
119
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
120
- </p>
121
- </div>
122
- </body>
123
- </html>
 
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
+ }