Spaces:

awacke1
/

HTML5.3D.Flight.with.Gravity

Running

App Files Files Community

awacke1 commited on Apr 1, 2023

Commit

1fb1246

1 Parent(s): 4930bb3

Update index.html

Browse files

Files changed (1) hide show

index.html +64 -36

index.html CHANGED Viewed

@@ -9,46 +9,74 @@
   <body>
     <a-scene>
       <a-assets>
-        <img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
         <img id="aircraftTexture" src="https://cdn.aframe.io/a-painter/images/brushes/fur.jpg">
       </a-assets>
-      <a-sky material="shader: flat; src: #skyTexture"></a-sky>
-      <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: https://cdn.aframe.io/a-painter/images/terrain.jpg; roughness: 1;"></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-light type="directional" color="#ffffff" intensity="0.5" position="0 10 -10" shadow="cast: true; receive: true;"></a-light>
-      <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>

   <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>