File size: 3,743 Bytes
bb1f375 1094fd6 2b7cc8e 1094fd6 1fb1246 1094fd6 1fb1246 1094fd6 1fb1246 1094fd6 1fb1246 1094fd6 1fb1246 1094fd6 1fb1246 2b7cc8e 1fb1246 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!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>
<script src="https://raw.githack.com/IdeaSpaceVR/aframe-noise/master/dist/aframe-noise.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="skyTexture" src="https://i.imgur.com/BhMPg1d.jpg">
<img id="starTexture" src="https://i.imgur.com/tpGKfVn.png">
<img id="aircraftTexture" src="https://cdn.aframe.io/a-painter/images/brushes/fur.jpg">
</a-assets>
<a-entity noise="speed: 0.5; scale: 10 10 10; amplitude: 5; octaves: 5;" geometry="primitive: plane; height: 100; width: 100;" material="shader: standard; src: #skyTexture; roughness: 1;"></a-entity>
<a-entity position="0 20 -100">
<a-entity light="type: ambient; color: #3a3a3a;"></a-entity>
<a-entity light="type: point; color: #fff; intensity: 1; distance: 50;">
<a-sphere radius="1" position="0 0 0" material="src: #starTexture; transparent: true; opacity: 0.9;"></a-sphere>
</a-entity>
<a-entity light="type: point; color: #fff; intensity: 1; distance: 200;">
<a-sphere radius="1" position="50 -20 -100" material="src: #starTexture; transparent: true; opacity: 0.9;"></a-sphere>
</a-entity>
<a-entity light="type: point; color: #fff; intensity: 1; distance: 150;">
<a-sphere radius="1" position="-100 20 -50" material="src: #starTexture; transparent: true; opacity: 0.9;"></a-sphere>
</a-entity>
<a-entity light="type: point; color: #fff; intensity: 1; distance: 100;">
<a-sphere radius="1" position="30 -50 -80" material="src: #starTexture; transparent: true; opacity: 0.9;"></a-sphere>
</a-entity>
<a-entity light="type: point; color: #fff; intensity: 1; distance: 50;">
<a-sphere radius="1" position="-80 -10 -150" material="src: #starTexture; transparent: true; opacity: 0.9;"></a-sphere>
</a-entity>
<a-entity fog="type: exponential; color: #8cc7d9; density: 0.02;"></a-entity>
</a-entity>
<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" shadow="cast: true
; receive: false;"></a-entity>
<a-entity position="0 0 -10">
<a-entity light="type: point; color: #fff; intensity: 5; distance: 20;"></a-entity>
<a-entity particle-system="color: #fff; particleCount: 5000; maxAge: 3; velocitySpread: 2 2 2; accelerationValue: 0 -1 0;"></a-entity>
<a-entity light="type: point; color: #fff; intensity: 0.5; distance: 50;" position="0 -5 -20">
<a-entity geometry="primitive: sphere; radius: 1;" material="emissive: #fff; emissiveIntensity: 1;"></a-entity>
</a-entity>
</a-entity>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
<a-entity volume-light="density: 0.25; color: #8cc7d9;"></a-entity>
</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> |