Hugging Face's logo

Spaces:
Billius
/
html5-Aframe-VR
Running

App Files Community
Billius commited on
Commit
9c83037
·
1 Parent(s): d5be7fb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +101 -16
index.html CHANGED
@@ -1,19 +1,104 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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>