awacke1/HTML5-Aframe-3D-Maps
9
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 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 entity95 const camera = document.querySelector('#camera');96 97 // Define the zoom in and zoom out functions98 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