|
|
|
|
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>3D Flight Demo</title> |
|
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> |
|
</head> |
|
<body> |
|
<a-scene> |
|
<a-assets> |
|
<img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg"> |
|
<img id="terrainTexture" src="https://cdn.aframe.io/a-painter/images/terrain.jpg"> |
|
<img id="aircraftTexture" src="https://cdn.aframe.io/a-painter/images/brushes/fur.jpg"> |
|
</a-assets> |
|
<a-sky src="#skyTexture"></a-sky> |
|
<a-plane src="#terrainTexture" rotation="-90 0 0" height="100" width="100"></a-plane> |
|
<a-entity id="aircraft" position="0 2 -5" rotation="0 0 0" geometry="primitive: box; height: 0.5; width: 1.5; depth: 2" material="src: #aircraftTexture"></a-entity> |
|
<a-camera> |
|
<a-cursor></a-cursor> |
|
</a-camera> |
|
</a-scene> |
|
<script> |
|
var aircraft = document.querySelector('#aircraft'); |
|
var velocity = new THREE.Vector3(0, 0, 0); |
|
var gravity = new THREE.Vector3(0, -0.1, 0); |
|
var thrust = new THREE.Vector3(0, 0, -0.1); |
|
var keys = {}; |
|
|
|
function update() { |
|
if (keys['ArrowUp']) { |
|
velocity.add(thrust); |
|
} |
|
velocity.add(gravity); |
|
aircraft.object3D.position.add(velocity); |
|
aircraft.object3D.rotation.x = velocity.z * 0.1; |
|
aircraft.object3D.rotation.y = -velocity.x * 0.1; |
|
aircraft.object3D.rotation.z = -velocity.y * 0.1; |
|
requestAnimationFrame(update); |
|
} |
|
|
|
window.addEventListener('keydown', function(event) { |
|
keys[event.code] = true; |
|
}); |
|
|
|
window.addEventListener('keyup', function(event) { |
|
keys[event.code] = false; |
|
}); |
|
|
|
update(); |
|
</script> |
|
</body> |
|
</html> |
