|
|
<!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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
const player = document.querySelector('#player'); |
|
|
const camera = document.querySelector('#camera'); |
|
|
|
|
|
|
|
|
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}); |
|
|
} |
|
|
|
|
|
|
|
|
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> |
