|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<title>Flying Plane Game</title> |
|
|
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> |
|
|
<script> |
|
|
AFRAME.registerComponent('fly', { |
|
|
schema: { |
|
|
speed: { default: 1 } |
|
|
}, |
|
|
|
|
|
tick: function() { |
|
|
var plane = this.el; |
|
|
var rotation = plane.getAttribute('rotation'); |
|
|
var position = plane.getAttribute('position'); |
|
|
|
|
|
|
|
|
var direction = new THREE.Vector3(); |
|
|
plane.object3D.getWorldDirection(direction); |
|
|
plane.setAttribute( |
|
|
'position', |
|
|
`${position.x + direction.x * this.data.speed} ${position.y + direction.y * this.data.speed} ${position.z + direction.z * this.data.speed}` |
|
|
); |
|
|
|
|
|
|
|
|
if (keys.left) { |
|
|
plane.setAttribute('rotation', `${rotation.x} ${rotation.y - 1} ${rotation.z}`); |
|
|
} else if (keys.right) { |
|
|
plane.setAttribute('rotation', `${rotation.x} ${rotation.y + 1} ${rotation.z}`); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
AFRAME.registerComponent('skybox', { |
|
|
schema: { |
|
|
speed: { default: 0.01 } |
|
|
}, |
|
|
|
|
|
tick: function() { |
|
|
var sky = this.el; |
|
|
var rotation = sky.getAttribute('rotation'); |
|
|
sky.setAttribute('rotation', `${rotation.x} ${rotation.y + this.data.speed} ${rotation.z}`); |
|
|
} |
|
|
}); |
|
|
|
|
|
var keys = { |
|
|
left: false, |
|
|
right: false |
|
|
}; |
|
|
|
|
|
window.addEventListener('keydown', function(event) { |
|
|
if (event.key === 'ArrowLeft') { |
|
|
keys.left = true; |
|
|
} else if (event.key === 'ArrowRight') { |
|
|
keys.right = true; |
|
|
} |
|
|
}); |
|
|
|
|
|
window.addEventListener('keyup', function(event) { |
|
|
if (event.key === 'ArrowLeft') { |
|
|
keys.left = false; |
|
|
} else if (event.key === 'ArrowRight') { |
|
|
keys.right = false; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<a-scene> |
|
|
<a-entity id="plane" fly speed="0.1" position="0 0 -10" rotation="0 0 0"> |
|
|
<a-entity |
|
|
geometry="primitive: box; width: 2; height: 0.5; depth: 6" |
|
|
material="color: red" |
|
|
position="0 0 0" |
|
|
></a-entity> |
|
|
</a-entity> |
|
|
|
|
|
<a-sky src="Spike.png" rotation="0 0 0" skybox speed="0.01"></a-sky> |
|
|
|
|
|
<a-plane src="Tronworld.png" rotation="-90 0 0" position="0 -1 0"></a-plane> |
|
|
</a-scene> |
|
|
</body> |
|
|
</html> |
