Spaces:
Running
Running
Update index.html
Browse files- index.html +104 -0
index.html
CHANGED
|
@@ -1,4 +1,108 @@
|
|
| 1 |
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8" />
|
|
|
|
| 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" />
|