Update index.html
Browse files- index.html +82 -17
index.html
CHANGED
|
@@ -1,19 +1,84 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html>
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="utf-8" />
|
| 5 |
+
<title>Flying Plane Game</title>
|
| 6 |
+
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
|
| 7 |
+
<script>
|
| 8 |
+
AFRAME.registerComponent('fly', {
|
| 9 |
+
schema: {
|
| 10 |
+
speed: { default: 1 }
|
| 11 |
+
},
|
| 12 |
+
|
| 13 |
+
tick: function() {
|
| 14 |
+
var plane = this.el;
|
| 15 |
+
var rotation = plane.getAttribute('rotation');
|
| 16 |
+
var position = plane.getAttribute('position');
|
| 17 |
+
|
| 18 |
+
// Move plane forward
|
| 19 |
+
var direction = new THREE.Vector3();
|
| 20 |
+
plane.object3D.getWorldDirection(direction);
|
| 21 |
+
plane.setAttribute(
|
| 22 |
+
'position',
|
| 23 |
+
`${position.x + direction.x * this.data.speed} ${position.y + direction.y * this.data.speed} ${position.z + direction.z * this.data.speed}`
|
| 24 |
+
);
|
| 25 |
+
|
| 26 |
+
// Rotate plane left or right
|
| 27 |
+
if (keys.left) {
|
| 28 |
+
plane.setAttribute('rotation', `${rotation.x} ${rotation.y - 1} ${rotation.z}`);
|
| 29 |
+
} else if (keys.right) {
|
| 30 |
+
plane.setAttribute('rotation', `${rotation.x} ${rotation.y + 1} ${rotation.z}`);
|
| 31 |
+
}
|
| 32 |
+
}
|
| 33 |
+
});
|
| 34 |
+
|
| 35 |
+
AFRAME.registerComponent('skybox', {
|
| 36 |
+
schema: {
|
| 37 |
+
speed: { default: 0.01 }
|
| 38 |
+
},
|
| 39 |
+
|
| 40 |
+
tick: function() {
|
| 41 |
+
var sky = this.el;
|
| 42 |
+
var rotation = sky.getAttribute('rotation');
|
| 43 |
+
sky.setAttribute('rotation', `${rotation.x} ${rotation.y + this.data.speed} ${rotation.z}`);
|
| 44 |
+
}
|
| 45 |
+
});
|
| 46 |
+
|
| 47 |
+
var keys = {
|
| 48 |
+
left: false,
|
| 49 |
+
right: false
|
| 50 |
+
};
|
| 51 |
+
|
| 52 |
+
window.addEventListener('keydown', function(event) {
|
| 53 |
+
if (event.key === 'ArrowLeft') {
|
| 54 |
+
keys.left = true;
|
| 55 |
+
} else if (event.key === 'ArrowRight') {
|
| 56 |
+
keys.right = true;
|
| 57 |
+
}
|
| 58 |
+
});
|
| 59 |
+
|
| 60 |
+
window.addEventListener('keyup', function(event) {
|
| 61 |
+
if (event.key === 'ArrowLeft') {
|
| 62 |
+
keys.left = false;
|
| 63 |
+
} else if (event.key === 'ArrowRight') {
|
| 64 |
+
keys.right = false;
|
| 65 |
+
}
|
| 66 |
+
});
|
| 67 |
+
</script>
|
| 68 |
+
</head>
|
| 69 |
+
<body>
|
| 70 |
+
<a-scene>
|
| 71 |
+
<a-entity id="plane" fly speed="0.1" position="0 0 -10" rotation="0 0 0">
|
| 72 |
+
<a-entity
|
| 73 |
+
geometry="primitive: box; width: 2; height: 0.5; depth: 6"
|
| 74 |
+
material="color: red"
|
| 75 |
+
position="0 0 0"
|
| 76 |
+
></a-entity>
|
| 77 |
+
</a-entity>
|
| 78 |
+
|
| 79 |
+
<a-sky src="path_to_sky_image.jpg" rotation="0 0 0" skybox speed="0.01"></a-sky>
|
| 80 |
+
|
| 81 |
+
<a-plane src="path_to_ground_image.jpg" rotation="-90 0 0" position="0 -1 0"></a-plane>
|
| 82 |
+
</a-scene>
|
| 83 |
+
</body>
|
| 84 |
+
</html>
|