File size: 3,822 Bytes
ba6732e b7cccf7 ba6732e b7cccf7 65c7cfb b7cccf7 65c7cfb b7cccf7 65c7cfb b7cccf7 65c7cfb b7cccf7 65c7cfb b7cccf7 65c7cfb b7cccf7 65c7cfb b7cccf7 65c7cfb b7cccf7 65c7cfb b7cccf7 61c8c09 d48621d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minnesota Map</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/@aframe/physics-system"></script>
<style>
#canvas {
height: 500px;
width: 800px;
}
.button {
background-color: #222;
border: none;
color: white;
font-size: 16px;
padding: 10px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
.link {
color: #8CEEEF;
}
</style>
</head>
<body>
<a-scene physics="debug: true;">
<a-entity environment="preset: forest"></a-entity>
<!-- Define the polygons for Minnesota -->
<a-entity position="0 0 -5">
<a-entity position="-2.5 0 0">
<a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1" static-body></a-polygon>
<a-polygon fill="#2D6C4E" vertices="0.5 1, 1 0, 1 1" static-body></a-polygon>
<a-polygon fill="#2D6C4E" vertices="0 0, 0 1, 0.5 1" static-body></a-polygon>
<a-polygon fill="#2D6C4E" vertices="0.5 0, 1 0, 0.5 1" static-body></a-polygon>
</a-entity>
<a-entity position="2.5 0 0">
<a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1" static-body></a-polygon>
<a-polygon fill="#2D6C4E" vertices="0 0, 0 1, 0.5 1" static-body></a-polygon>
<a-polygon fill="#2D6C4E" vertices="0.5 0, 1 0, 1 1" static-body></a-polygon>
<a-polygon fill="#2D6C4E" vertices="0.5 0, 0.5 1, 1 1" static-body></a-polygon>
</a-entity>
</a-entity>
<!-- Define the camera and buttons -->
<a-entity id="player" position="0 50 0" kinematic-body>
<a-entity id="camera" camera look-controls kinematic-body></a-entity>
<a-entity id="zoomIn" class="button" position="-2.5 0 0" rotation="0 0 180" onclick="zoomIn()">+</a-entity>
<a-entity id="zoomOut" class="button" position="2.5 0 0" onclick="zoomOut()">-</a-entity>
</a-entity>
<!-- Define the script to update the video texture -->
<script>
const video = document.querySelector('#video');
const canvas = document.querySelector('#videoTextureCanvas');
const ctx = canvas.getContext('2d');
function updateVideoTexture() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const texture = document.querySelector('#videoTexture');
texture.needsUpdate = true;
}
video.addEventListener('play', function() {
setInterval(updateVideoTexture, 16);
});
</script>
<script>
// Get the camera entity
const player = document.querySelector('#player');
const camera = document.querySelector('#camera');
// Define the zoom in and zoom out functions
function zoomIn() {
camera.setAttribute('position', {x: camera.getAttribute('position').x, y: camera.getAttribute('position').y - 5, z: camera.getAttribute('position').z});
}
function zoomOut() {
camera.setAttribute('position', {x: camera.getAttribute('position').x, y: camera.getAttribute('position').y + 5, z: camera.getAttribute('position').z});
}
// Define the gravity and physics for the player
player.addEventListener('componentinitialized', function (evt) {
if (evt.detail.name !== 'kinematic-body') { return; }
const physics = player.getAttribute('physics');
physics.debug = false;
physics.driver = 'physics';
physics.debug = true;
physics.debugInterval = 500;
physics.debugTiming = 'interval';
player.setAttribute('physics', physics);
player.body.linearDamping = 0.9;
player.body.angularDamping = 0.9;
player.body.gravity.y = -30;
player.body.mass = 80;
});
</script>
</a-scene>
</body>
</html> |