Create backup.index.html
Browse files- backup.index.html +54 -0
backup.index.html
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
|
| 2 |
+
|
| 3 |
+
<!DOCTYPE html>
|
| 4 |
+
<html>
|
| 5 |
+
<head>
|
| 6 |
+
<meta charset="utf-8">
|
| 7 |
+
<title>3D Flight Demo</title>
|
| 8 |
+
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
|
| 9 |
+
</head>
|
| 10 |
+
<body>
|
| 11 |
+
<a-scene>
|
| 12 |
+
<a-assets>
|
| 13 |
+
<img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
|
| 14 |
+
<img id="terrainTexture" src="https://cdn.aframe.io/a-painter/images/terrain.jpg">
|
| 15 |
+
<img id="aircraftTexture" src="https://cdn.aframe.io/a-painter/images/brushes/fur.jpg">
|
| 16 |
+
</a-assets>
|
| 17 |
+
<a-sky src="#skyTexture"></a-sky>
|
| 18 |
+
<a-plane src="#terrainTexture" rotation="-90 0 0" height="100" width="100"></a-plane>
|
| 19 |
+
<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>
|
| 20 |
+
<a-camera>
|
| 21 |
+
<a-cursor></a-cursor>
|
| 22 |
+
</a-camera>
|
| 23 |
+
</a-scene>
|
| 24 |
+
<script>
|
| 25 |
+
var aircraft = document.querySelector('#aircraft');
|
| 26 |
+
var velocity = new THREE.Vector3(0, 0, 0);
|
| 27 |
+
var gravity = new THREE.Vector3(0, -0.1, 0);
|
| 28 |
+
var thrust = new THREE.Vector3(0, 0, -0.1);
|
| 29 |
+
var keys = {};
|
| 30 |
+
|
| 31 |
+
function update() {
|
| 32 |
+
if (keys['ArrowUp']) {
|
| 33 |
+
velocity.add(thrust);
|
| 34 |
+
}
|
| 35 |
+
velocity.add(gravity);
|
| 36 |
+
aircraft.object3D.position.add(velocity);
|
| 37 |
+
aircraft.object3D.rotation.x = velocity.z * 0.1;
|
| 38 |
+
aircraft.object3D.rotation.y = -velocity.x * 0.1;
|
| 39 |
+
aircraft.object3D.rotation.z = -velocity.y * 0.1;
|
| 40 |
+
requestAnimationFrame(update);
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
window.addEventListener('keydown', function(event) {
|
| 44 |
+
keys[event.code] = true;
|
| 45 |
+
});
|
| 46 |
+
|
| 47 |
+
window.addEventListener('keyup', function(event) {
|
| 48 |
+
keys[event.code] = false;
|
| 49 |
+
});
|
| 50 |
+
|
| 51 |
+
update();
|
| 52 |
+
</script>
|
| 53 |
+
</body>
|
| 54 |
+
</html>
|