Spaces:

akhaliq
/

cargames

Running

App Files Files Community

akhaliq HF Staff commited on Apr 6, 2025

Commit

b7f4ac5

verified ·

1 Parent(s): 107476b

Update index.html

Browse files

Files changed (1) hide show

index.html +126 -138

index.html CHANGED Viewed

@@ -1,153 +1,141 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="UTF-8">
-  <style>body { margin: 0; background-color: #87CEEB; }</style>
 </head>
 <body>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-  <script>
-    // SETTINGS
-    var planeSpeed = 0.1;
-    var planeRollSpeed = 0.05;
-    var planePitchSpeed = 0.05;
-    var maxAltitude = 1000;
-    var maxSpeed = 5;
-    // SETUP SCENE, CAMERA, RENDERER
-    var scene = new THREE.Scene();
-    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
-    var renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement);
-    // GENERATE SKYBOX (simple gradient)
-    var vertexShader = `
-      varying vec3 vWorldPosition;
-      void main() {
-        vec4 worldPosition = modelMatrix * vec4(position, 1.0);
-        vWorldPosition = worldPosition.xyz;
-        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-      }
-    `;
-    var fragmentShader = `
-      uniform vec3 topColor;
-      uniform vec3 bottomColor;
-      uniform float offset;
-      uniform float exponent;
-      varying vec3 vWorldPosition;
-      void main() {
-        float h = normalize(vWorldPosition + offset).y;
-        gl_FragColor = vec4(mix(bottomColor, topColor, pow(max(h, 0.0), exponent)), 1.0);
-      }
-    `;
-    var skyUniforms = {
-      topColor: { value: new THREE.Color(0x87CEEB) }, // light blue
-      bottomColor: { value: new THREE.Color(0xFFFFFF) }, // white
-      offset: { value: 33 },
-      exponent: { value: 0.6 }
-    };
-    var skyGeo = new THREE.SphereGeometry(5000, 32, 15);
-    var skyMat = new THREE.ShaderMaterial({
-      vertexShader, fragmentShader, uniforms: skyUniforms, side: THREE.BackSide
-    });
-    var sky = new THREE.Mesh(skyGeo, skyMat);
-    scene.add(sky);
-    // GENERATE GROUND (simple plane)
-    var groundGeo = new THREE.PlaneGeometry(10000, 10000, 10, 10);
-    var groundMat = new THREE.MeshLambertMaterial({ color: 0x32CD32 }); // lime green
-    var ground = new THREE.Mesh(groundGeo, groundMat);
-    ground.rotation.x = -Math.PI / 2;
-    scene.add(ground);
-    // GENERATE AIRPLANE (simple mesh)
-    var planeGeo = new THREE.Group();
-    var fuselageGeo = new THREE.CylinderGeometry(1, 2, 10, 20);
-    var fuselageMat = new THREE.MeshLambertMaterial({ color: 0xFFFFFF }); // white
-    var fuselage = new THREE.Mesh(fuselageGeo, fuselageMat);
-    planeGeo.add(fuselage);
-    var wingGeo = new THREE.BoxGeometry(10, 1, 1);
-    var wingMat = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); // red
-    var leftWing = new THREE.Mesh(wingGeo, wingMat);
-    leftWing.position.x = -5;
-    planeGeo.add(leftWing);
-    var rightWing = new THREE.Mesh(wingGeo, wingMat);
-    rightWing.position.x = 5;
-    planeGeo.add(rightWing);
-    var tailGeo = new THREE.ConeGeometry(1, 2, 10);
-    var tailMat = new THREE.MeshLambertMaterial({ color: 0x0000FF }); // blue
-    var tail = new THREE.Mesh(tailGeo, tailMat);
-    tail.position.z = -5;
-    planeGeo.add(tail);
-    scene.add(planeGeo);
-    var plane = planeGeo; // we'll move this
-    // ADD LIGHTING
-    var sun = new THREE.DirectionalLight(0xFFFFFF, 1);
-    sun.position.set(100, 100, 100);
-    scene.add(sun);
-    var ambient = new THREE.AmbientLight(0x444444);
-    scene.add(ambient);
-    // CAMERA ATTACH TO PLANE
-    plane.add(camera);
-    camera.position.set(0, 5, -15); // behind the cockpit
-    camera.lookAt(plane.position);
-    // USER INPUT (keyboard)
-    var keys = {
-      w: false, s: false, a: false, d: false,
-      q: false, e: false, r: false, f: false
-    };
-    document.addEventListener('keydown', (e) => {
-      if (e.key in keys) keys[e.key] = true;
-    });
-    document.addEventListener('keyup', (e) => {
-      if (e.key in keys) keys[e.key] = false;
-    });
-    // MAIN LOOP
-    var velocity = new THREE.Vector3();
-    var direction = new THREE.Vector3();
-    var roll = 0, pitch = 0, altitude = 0, speed = 0;
-    function animate() {
-      requestAnimationFrame(animate);
-      // PLANE CONTROLS
-      if (keys.w) speed = Math.min(maxSpeed, speed + 0.01);
-      if (keys.s) speed = Math.max(0, speed - 0.01);
-      if (keys.a) roll -= planeRollSpeed;
-      if (keys.d) roll += planeRollSpeed;
-      if (keys.q) pitch -= planePitchSpeed;
-      if (keys.e) pitch += planePitchSpeed;
-      if (keys.r) { /* reset */ roll = pitch = 0; speed = 1; }
-      if (keys.f) { /* full throttle */ speed = maxSpeed; }
-      // PHYSICS SIM (very basic)
-      plane.rotation.z = roll;
-      plane.rotation.x = pitch;
-      direction.set(0, 0, -1).applyEuler(plane.rotation);
-      velocity.add(direction.multiplyScalar(speed * planeSpeed));
-      plane.position.add(velocity);
-      altitude = plane.position.y;
-      if (altitude < 0) {
-        plane.position.y = 0; // don't go underground
-        velocity.y = 0;
-      }
-      if (altitude > maxAltitude) {
-        plane.position.y = maxAltitude; // don't go too high
-        velocity.y = 0;
-      }
-      velocity.multiplyScalar(0.99); // friction
-      // CAMERA FOLLOW
-      camera.lookAt(plane.position);
-      // RENDER
-      renderer.render(scene, camera);
     }
-    animate();
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="UTF-8">
+    <title>Flight Sim by Three.js</title>
+    <style>
+        body { margin: 0; background-color: #87CEEB; } /* Sky blue */
+        canvas { display: block; }
+    </style>
 </head>
 <body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script>
+// SET UP SCENE, CAMERA, RENDERER
+var scene = new THREE.Scene();
+var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+// GENERATE SIMPLE TERRAIN (a big flat plane)
+var terrainGeo = new THREE.PlaneGeometry(1000, 1000, 100, 100); // 1km x 1km
+var terrainMat = new THREE.MeshLambertMaterial({color: 0x228B22}); // Forest green
+var terrain = new THREE.Mesh(terrainGeo, terrainMat);
+terrain.rotation.x = -Math.PI / 2; // Lay it flat
+terrain.position.y = -50; // Sink it a bit so plane starts "on ground"
+scene.add(terrain);
+// GENERATE SIMPLE AIRPLANE (just some colored cubes + lines, lol what a plane)
+var planeGeo = new THREE.BoxGeometry(10, 2, 5); // fuselage
+var planeMat = new THREE.MeshLambertMaterial({color: 0xFF9900}); // Orange
+var plane = new THREE.Mesh(planeGeo, planeMat);
+var wingGeo = new THREE.BoxGeometry(15, 0.5, 2);
+var wingMat = new THREE.MeshLambertMaterial({color: 0xFFFFFF}); // White
+var leftWing = new THREE.Mesh(wingGeo, wingMat);
+leftWing.position.x = -7.5;
+leftWing.position.y = 1;
+plane.add(leftWing);
+var rightWing = leftWing.clone();
+rightWing.position.x *= -1;
+plane.add(rightWing);
+var tailGeo = new THREE.BoxGeometry(2, 4, 0.5);
+var tailMat = new THREE.MeshLambertMaterial({color: 0xFF0000}); // Red
+var tail = new THREE.Mesh(tailGeo, tailMat);
+tail.position.z = -5;
+tail.position.y = 2;
+plane.add(tail);
+var cockpitGeo = new THREE.SphereGeometry(1, 16, 16);
+var cockpitMat = new THREE.MeshLambertMaterial({color: 0x444444}); // Dark gray
+var cockpit = new THREE.Mesh(cockpitGeo, cockpitMat);
+cockpit.position.z = 4;
+plane.add(cockpit);
+scene.add(plane);
+// CAMERA RIG: attach camera to plane (like we're sitting in cockpit)
+camera.position.set(0, 2, -10); // behind & above cockpit
+plane.add(camera); // now cam moves with plane!
+// LIGHTING (simple sun + ambient so we can see stuff)
+var sunLight = new THREE.DirectionalLight(0xFFFFFF, 1);
+sunLight.position.set(100, 200, 50);
+scene.add(sunLight);
+var ambLight = new THREE.AmbientLight(0x444444);
+scene.add(ambLight);
+// PHYSICS VARIABLES & SETTINGS
+var planePos = new THREE.Vector3(0, 0, 0); // start at origin (middle of terrain)
+var planeVel = new THREE.Vector3(0, 0, 0); // not moving yet
+var planeRot = new THREE.Euler(); // for pitch, yaw, roll
+plane.rotation.setFromEuler(planeRot);
+var throttle = 0; // 0 to 1
+var pitchRate = 0; // -1 to 1 (up/down stick)
+var yawRate = 0; // -1 to 1 (left/right stick)
+var rollRate = 0; // -1 to 1 (ailerons)
+var maxSpeed = 50; // units per sec (pretty fast)
+var liftCoeff = 0.05; // magic number makes flying feel right
+var gravity = new THREE.Vector3(0, -9.8, 0);
+// CONTROLS (keyboard)
+var keyState = {};
+document.addEventListener('keydown', (k) => keyState[k.key] = true);
+document.addEventListener('keyup', (k) => keyState[k.key] = false);
+function getControlState() {
+    if (keyState['w'] || keyState['ArrowUp']) pitchRate = -0.5; else
+    if (keyState['s'] || keyState['ArrowDown']) pitchRate = 0.5; else
+    pitchRate = 0;
+    if (keyState['a'] || keyState['ArrowLeft']) yawRate = -0.5; else
+    if (keyState['d'] || keyState['ArrowRight']) yawRate = 0.5; else
+    yawRate = 0;
+    if (keyState['q']) rollRate = -0.5; else
+    if (keyState['e']) rollRate = 0.5; else
+    rollRate = 0;
+    if (keyState['Shift']) throttle = Math.min(throttle + 0.01, 1); else
+    if (keyState['Control']) throttle = Math.max(throttle - 0.01, 0);
+}
+// MAIN UPDATE LOOP
+function animate(t) {
+    requestAnimationFrame(animate);
+    getControlState(); // read keyboard
+    // ROTATE PLANE (pitch, yaw from controls)
+    planeRot.x += pitchRate * 0.01; // integrate pitch
+    planeRot.y += yawRate * 0.01; // integrate yaw
+    planeRot.z += rollRate * 0.005; // a bit of roll (less intuitive)
+    plane.rotation.setFromEuler(planeRot);
+    // FORWARD VELOCITY (based on throttle & direction)
+    var forward = new THREE.Vector3(0, 0, 1);
+    forward.applyEuler(planeRot); // where are we pointing?
+    var desiredVel = forward.multiplyScalar(throttle * maxSpeed);
+    // LIFT FORCE (magic makes plane want to go up when moving fast)
+    var lift = forward.clone().multiplyScalar(liftCoeff * throttle * maxSpeed);
+    lift.y = Math.abs(lift.z); // up vector scales with forward speed
+    // SUM FORCES (thrust, lift, gravity)
+    var accel = desiredVel.clone().sub(planeVel).multiplyScalar(0.05); // gentle accel
+    accel.add(lift.multiplyScalar(0.01)); // tiny bit of lift helps
+    accel.add(gravity); // always pulled down
+    // INTEGRATE VELOCITY & POSITION
+    planeVel.add(accel);
+    planePos.add(planeVel.multiplyScalar(0.016)); // assume ~60fps = 0.016 s/step
+    // UPDATE PLANE POSITION
+    plane.position.copy(planePos);
+    // KEEP PLANE ABOVE TERRAIN (crude collision)
+    if (planePos.y < -45) { // hit ground?
+        planePos.y = -45; // stick to ground
+        planeVel.y = Math.max(planeVel.y, 0); // no bounce
     }
+    renderer.render(scene, camera);
+}
+animate();
+</script>
 </body>
 </html>