Spaces:

akhaliq
/

cargames

Running

App Files Files Community

akhaliq HF Staff commited on Apr 6, 2025

Commit

c4c386f

verified ·

1 Parent(s): 011ac1b

Update index.html

Browse files

Files changed (1) hide show

index.html +108 -143

index.html CHANGED Viewed

@@ -3,33 +3,23 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Enhanced Three.js Flight Simulator</title>
     <style>
         body { margin: 0; background-color: #000; overflow: hidden; }
         canvas { display: block; }
-        #controls { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.7); padding: 10px; font-family: monospace; font-size: 14px; }
         #instruments { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: #0F0; padding: 10px; font-family: monospace; font-size: 14px; }
     </style>
 </head>
 <body>
-<div id="controls">
-    <b>Flight Simulator Controls:</b><br>
-    W / ↑ : Pitch Up (Climb)<br>
-    S / ↓ : Pitch Down (Dive)<br>
-    A / ← : Yaw Left (Turn Left, but use roll for real turns)<br>
-    D / → : Yaw Right (Turn Right, but use roll for real turns)<br>
-    Q / E : Roll Left/Right (Bank for turns)<br>
-    ↑↑ Speed up (gradually)<br>
-    ↓↓ Slow down (gradually)<br>
-    Mouse Look (drag to change view direction)
-</div>
 <div id="instruments">
-    <b>Flight Instruments:</b><br>
     Alt: <span id="altimeter">0 ft</span><br>
     Airspeed: <span id="airspeed">0 kts</span><br>
-    Heading: <span id="heading">0°</span>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
@@ -37,7 +27,10 @@
 // Scene
 let scene = new THREE.Scene();
-// Skybox (gradient sky)
 let skyGeom = new THREE.SphereGeometry(500, 32, 32);
 let skyMat = new THREE.ShaderMaterial({
     vertexShader: `
@@ -49,67 +42,58 @@ let skyMat = new THREE.ShaderMaterial({
         }
     `,
     fragmentShader: `
         varying vec3 vWorldPosition;
         void main() {
-            float heightFactor = (vWorldPosition.y + 250.0) / 500.0;
-            heightFactor = clamp(heightFactor, 0.0, 1.0);
-            vec3 topColor = vec3(0.1, 0.4, 0.8); // Light blue
-            vec3 bottomColor = vec3(0.8, 0.6, 0.2); // Light brown
-            gl_FragColor = vec4(mix(bottomColor, topColor, heightFactor), 1.0);
         }
     `,
-    side: THREE.BackSide
 });
 let sky = new THREE.Mesh(skyGeom, skyMat);
 scene.add(sky);
-// Ground (simple hills)
-let groundGeom = new THREE.PlaneGeometry(200, 200, 64, 64);
-for (let i = 0; i < groundGeom.attributes.position.count; i++) {
-    let x = groundGeom.attributes.position.getX(i);
-    let z = groundGeom.attributes.position.getZ(i);
-    let y = Math.sin(x * 0.1) * Math.cos(z * 0.1) * 5.0; // Simple hills
-    groundGeom.attributes.position.setY(i, y);
 }
-let groundMat = new THREE.MeshLambertMaterial({ color: 0x228B22 }); // Forest green
-let ground = new THREE.Mesh(groundGeom, groundMat);
-ground.rotation.x = -Math.PI / 2;
-ground.receiveShadow = true;
-scene.add(ground);
-// Airplane (slightly nicer mesh)
 let planeGeom = new THREE.Group();
 let fuselageGeom = new THREE.BoxGeometry(2, 0.4, 6);
 let fuselageMat = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
 let fuselage = new THREE.Mesh(fuselageGeom, fuselageMat);
 fuselage.castShadow = true;
 let wingGeom = new THREE.BufferGeometry();
-const wingVertices = new Float32Array([
-    -2, 0, 1,  2, 0, 1,  2, 0, -2,
-    -2, 0, 1,  2, 0, -2, -2, 0, -2,
-]);
-let posAttr = new THREE.BufferAttribute(wingVertices, 3);
-wingGeom.setAttribute('position', posAttr);
 let wingMat = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
 let wingLeft = new THREE.Mesh(wingGeom, wingMat);
 wingLeft.position.x = -0.5;
-wingLeft.castShadow = true;
 let wingRight = wingLeft.clone();
 wingRight.position.x = 0.5;
-let tailGeom = new THREE.BufferGeometry();
-const tailVertices = new Float32Array([
-    0, 0.5, -3,  -0.5, 0, -3,  0.5, 0, -3
-]);
-let tailAttr = new THREE.BufferAttribute(tailVertices, 3);
-tailGeom.setAttribute('position', tailAttr);
-let tailMat = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
-let tail = new THREE.Mesh(tailGeom, tailMat);
-tail.castShadow = true;
 planeGeom.add(fuselage);
 planeGeom.add(wingLeft);
 planeGeom.add(wingRight);
-planeGeom.add(tail);
-scene.add(planeGeom);
 // Camera
 let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
@@ -120,14 +104,6 @@ camera.position.z = 2;
 // Lighting
 let ambientLight = new THREE.AmbientLight(0x333333);
 scene.add(ambientLight);
-let dirLight = new THREE.DirectionalLight(0xFFFFFF, 0.8);
-dirLight.position.set(10, 20, 10);
-dirLight.castShadow = true;
-dirLight.shadow.mapSize.width = 2048;
-dirLight.shadow.mapSize.height = 2048;
-dirLight.shadow.camera.near = 1;
-dirLight.shadow.camera.far = 100;
-scene.add(dirLight);
 // Renderer
 let renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -136,124 +112,113 @@ renderer.shadowMap.enabled = true;
 document.body.appendChild(renderer.domElement);
 // Flight dynamics
-let pitch = 0; // radians
-let yaw = 0;
-let roll = 0;
-let velocity = new THREE.Vector3(0, 0, 0); // m/s
-let airspeed = 0; // knots
-let altitude = 0; // meters
-let heading = 0; // degrees
-let liftForce = 0;
-let dragForce = 0;
-let gravity = new THREE.Vector3(0, -9.81, 0); // m/s²
-let mass = 1000; // kg (just a number)
-let wingLiftCoefficient = 10.0; // Made-up lift coeff
-let dragCoefficient = 0.5; // Parasitic drag
-let maxStallAngle = Math.PI / 6; // 30 degrees
-// Controls state
-let keys = {
-    w: false, s: false, a: false, d: false, q: false, e: false
-};
 document.addEventListener('keydown', (e) => {
     switch (e.key) {
-        case 'w': case 'ArrowUp': keys.w = true; break;
-        case 's': case 'ArrowDown': keys.s = true; break;
-        case 'a': case 'ArrowLeft': keys.a = true; break;
-        case 'd': case 'ArrowRight': keys.d = true; break;
         case 'q': keys.q = true; break;
         case 'e': keys.e = true; break;
     }
 });
 document.addEventListener('keyup', (e) => {
     switch (e.key) {
-        case 'w': case 'ArrowUp': keys.w = false; break;
-        case 's': case 'ArrowDown': keys.s = false; break;
-        case 'a': case 'ArrowLeft': keys.a = false; break;
-        case 'd': case 'ArrowRight': keys.d = false; break;
         case 'q': keys.q = false; break;
         case 'e': keys.e = false; break;
     }
 });
-// Mouse look
-let mouseDown = false;
-let lastMouseX, lastMouseY;
-let sensitivity = 0.005;
-document.addEventListener('mousedown', (e) => {
-    mouseDown = true;
-    lastMouseX = e.clientX;
-    lastMouseY = e.clientY;
-});
-document.addEventListener('mouseup', () => mouseDown = false);
-document.addEventListener('mousemove', (e) => {
-    if (mouseDown) {
-        let dx = e.clientX - lastMouseX;
-        let dy = e.clientY - lastMouseY;
-        yaw -= dx * sensitivity;
-        pitch -= dy * sensitivity;
-        pitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, pitch));
-        lastMouseX = e.clientX;
-        lastMouseY = e.clientY;
-    }
-});
-// Update instruments display
 function updateInstruments() {
-    document.getElementById('altimeter').innerText = Math.round(altitude * 3.28084) + ' ft'; // meters to feet
-    document.getElementById('airspeed').innerText = Math.round(airspeed) + ' kts';
-    document.getElementById('heading').innerText = Math.round(THREE.Math.radToDeg(yaw)) % 360 + '°';
 }
-// Main loop
 function animate() {
     requestAnimationFrame(animate);
     // Aerodynamics
-    let velocityDir = new THREE.Vector3(0, 0, -1); // Plane's forward in local space
-    velocityDir.applyQuaternion(planeGeom.quaternion).normalize();
-    airspeed = velocity.length() * 1.94384; // m/s to knots (approx)
-    let angleOfAttack = Math.acos(velocityDir.dot(new THREE.Vector3(0, 1, 0).applyQuaternion(planeGeom.quaternion)));
-    liftForce = wingLiftCoefficient * airspeed * airspeed * Math.sin(angleOfAttack);
-    if (angleOfAttack > maxStallAngle) liftForce *= (1 - (angleOfAttack - maxStallAngle) / (Math.PI / 2 - maxStallAngle)); // Stall
-    dragForce = dragCoefficient * airspeed * airspeed;
     // Forces
-    let lift = new THREE.Vector3(0, liftForce, 0).applyQuaternion(planeGeom.quaternion); // Lift always perpendicular to wings
-    let drag = velocityDir.clone().multiplyScalar(-dragForce);
-    let totalForce = new THREE.Vector3().add(gravity).add(lift).add(drag).divideScalar(mass);
-    // Update velocity & position (Verlet-ish integration)
-    velocity.add(totalForce.multiplyScalar(1/60)); // dt ~= 1/60s
     planeGeom.position.add(velocity.clone().multiplyScalar(1/60));
-    // Collision with ground (very crude)
-    altitude = planeGeom.position.y - groundGeom.attributes.position.getY(0); // approx
-    if (altitude < 0) {
-        planeGeom.position.y += -altitude; // push back up
-        velocity.y = Math.max(0, velocity.y * 0.8); // dampen bounce
     }
     // Controls
-    if (keys.w) pitch -= 0.005;
-    if (keys.s) pitch += 0.005;
     if (keys.a) yaw -= 0.01;
     if (keys.d) yaw += 0.01;
     if (keys.q) roll -= 0.02;
     if (keys.e) roll += 0.02;
-    // Limit angles
-    pitch = Math.max(-Math.PI/3, Math.min(Math.PI/4, pitch)); // less extreme pitch
-    roll = Math.max(-Math.PI/4, Math.min(Math.PI/4, roll));
-    // Apply rotations (order matters)
-    planeGeom.rotation.order = 'ZXY'; // Roll, Pitch, Yaw (aviation standard)
     planeGeom.rotation.z = roll;
     planeGeom.rotation.x = pitch;
     planeGeom.rotation.y = yaw;
-    // Update camera direction (following plane's rotation)
-    heading = THREE.Math.radToDeg(yaw) % 360;
     updateInstruments();
     renderer.render(scene, camera);

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ultimate Three.js Flight Simulator</title>
     <style>
         body { margin: 0; background-color: #000; overflow: hidden; }
         canvas { display: block; }
         #instruments { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: #0F0; padding: 10px; font-family: monospace; font-size: 14px; }
     </style>
 </head>
 <body>
 <div id="instruments">
+    <b>Cockpit Instruments:</b><br>
     Alt: <span id="altimeter">0 ft</span><br>
     Airspeed: <span id="airspeed">0 kts</span><br>
+    Heading: <span id="heading">0°</span><br>
+    RPM: <span id="rpm">0</span><br>
+    Fuel: <span id="fuel">100%</span><br>
+    Flaps: <span id="flaps">0%</span>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 // Scene
 let scene = new THREE.Scene();
+// Skybox with sun (gradient sky)
+let sun = new THREE.DirectionalLight(0xFFFFFF, 1);
+sun.position.set(100, 100, 100);
+scene.add(sun);
 let skyGeom = new THREE.SphereGeometry(500, 32, 32);
 let skyMat = new THREE.ShaderMaterial({
     vertexShader: `
         }
     `,
     fragmentShader: `
+        uniform vec3 sunPosition;
         varying vec3 vWorldPosition;
         void main() {
+            vec3 viewDirection = normalize(vWorldPosition);
+            vec3 sunDir = normalize(sunPosition);
+            float sunDot = max(dot(viewDirection, sunDir), 0.0);
+            vec3 dayColor = vec3(0.2, 0.5, 1.0); // Blue sky
+            vec3 sunsetColor = vec3(1.0, 0.5, 0.2); // Orange
+            vec3 nightColor = vec3(0.05, 0.05, 0.1); // Dark blue
+            float sunHeight = sunPosition.y / 100.0;
+            vec3 skyColor = mix(nightColor, mix(sunsetColor, dayColor, sunHeight), smoothstep(-0.1, 0.1, sunHeight));
+            gl_FragColor = vec4(skyColor + sunDot * 0.5, 1.0);
         }
     `,
+    side: THREE.BackSide,
+    uniforms: { sunPosition: { value: sun.position } }
 });
 let sky = new THREE.Mesh(skyGeom, skyMat);
 scene.add(sky);
+// Terrain (Perlin noise hills)
+let terrainSize = 256;
+let terrainGeom = new THREE.PlaneGeometry(200, 200, terrainSize, terrainSize);
+for (let i = 0; i < terrainGeom.attributes.position.count; i++) {
+    let x = terrainGeom.attributes.position.getX(i);
+    let z = terrainGeom.attributes.position.getZ(i);
+    let noise = (Math.sin(x * 0.1) + Math.sin(z * 0.1)) * 5 + (Math.random() * 2 - 1) * 2; // Simple noise
+    terrainGeom.attributes.position.setY(i, noise);
 }
+let terrainMat = new THREE.MeshLambertMaterial({ color: 0x228B22 });
+let terrain = new THREE.Mesh(terrainGeom, terrainMat);
+terrain.rotation.x = -Math.PI / 2;
+terrain.receiveShadow = true;
+scene.add(terrain);
+// Airplane (detailed mesh)
 let planeGeom = new THREE.Group();
 let fuselageGeom = new THREE.BoxGeometry(2, 0.4, 6);
 let fuselageMat = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
 let fuselage = new THREE.Mesh(fuselageGeom, fuselageMat);
 fuselage.castShadow = true;
 let wingGeom = new THREE.BufferGeometry();
+// ... (same wing vertices as before)
 let wingMat = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
 let wingLeft = new THREE.Mesh(wingGeom, wingMat);
 wingLeft.position.x = -0.5;
 let wingRight = wingLeft.clone();
 wingRight.position.x = 0.5;
 planeGeom.add(fuselage);
 planeGeom.add(wingLeft);
 planeGeom.add(wingRight);
+// ... (add tail, wheels)
 // Camera
 let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 // Lighting
 let ambientLight = new THREE.AmbientLight(0x333333);
 scene.add(ambientLight);
 // Renderer
 let renderer = new THREE.WebGLRenderer({ antialias: true });
 document.body.appendChild(renderer.domElement);
 // Flight dynamics
+let mass = 1500; // kg
+let wingArea = 10; // m²
+let wingLiftCoeff = 5.0;
+let dragCoeff = 0.5;
+let thrustMax = 5000; // Newtons (engine force)
+let thrust = 0;
+let rpm = 0;
+let fuel = 100; // %
+let flapsDeploy = 0; // 0-100%
+let velocity = new THREE.Vector3();
+let wind = new THREE.Vector3((Math.random() * 2 - 1) * 5, 0, (Math.random() * 2 - 1) * 5); // m/s
+// Controls
+let keys = { w: false, s: false, a: false, d: false, q: false, e: false, f: false };
 document.addEventListener('keydown', (e) => {
     switch (e.key) {
+        case 'w': keys.w = true; break;
+        case 's': keys.s = true; break;
+        case 'a': keys.a = true; break;
+        case 'd': keys.d = true; break;
         case 'q': keys.q = true; break;
         case 'e': keys.e = true; break;
+        case 'f': if (flapsDeploy < 100) flapsDeploy += 10; break;
     }
 });
 document.addEventListener('keyup', (e) => {
     switch (e.key) {
+        case 'w': keys.w = false; break;
+        case 's': keys.s = false; break;
+        case 'a': keys.a = false; break;
+        case 'd': keys.d = false; break;
         case 'q': keys.q = false; break;
         case 'e': keys.e = false; break;
     }
 });
+// Instruments update
 function updateInstruments() {
+    document.getElementById('altimeter').innerText = Math.round(planeGeom.position.y * 3.28084) + ' ft';
+    document.getElementById('airspeed').innerText = Math.round(velocity.length() * 1.94384) + ' kts';
+    document.getElementById('heading').innerText = Math.round(THREE.Math.radToDeg(planeGeom.rotation.y)) % 360 + '°';
+    document.getElementById('rpm').innerText = Math.round(rpm);
+    document.getElementById('fuel').innerText = Math.round(fuel) + '%';
+    document.getElementById('flaps').innerText = flapsDeploy + '%';
 }
+let pitch = 0, yaw = 0, roll = 0;
 function animate() {
     requestAnimationFrame(animate);
+    // Engine
+    if (keys.w && fuel > 0) {
+        thrust = Math.min(thrustMax, thrust + 100);
+        rpm = Math.min(2500, rpm + 50);
+        fuel -= 0.05; // Consume fuel
+    } else {
+        thrust = Math.max(0, thrust - 100);
+        rpm = Math.max(0, rpm - 50);
+    }
     // Aerodynamics
+    let airspeedVec = velocity.clone().sub(wind); // Relative airspeed
+    let airspeed = airspeedVec.length();
+    let angleOfAttack = Math.acos(airspeedVec.dot(new THREE.Vector3(0, 1, 0).applyQuaternion(planeGeom.quaternion)));
+    let lift = 0.5 * 1.225 * wingArea * wingLiftCoeff * airspeed * airspeed * Math.sin(angleOfAttack) * (1 + flapsDeploy / 100);
+    let drag = 0.5 * 1.225 * dragCoeff * wingArea * airspeed * airspeed;
+    if (angleOfAttack > Math.PI / 4) lift *= 0.5; // Stall
     // Forces
+    let liftVec = new THREE.Vector3(0, lift, 0).applyQuaternion(planeGeom.quaternion);
+    let dragVec = airspeedVec.clone().multiplyScalar(-drag / airspeed);
+    let thrustVec = new THREE.Vector3(0, 0, thrust).applyQuaternion(planeGeom.quaternion);
+    let totalForce = new THREE.Vector3().add(liftVec).add(dragVec).add(thrustVec).add(new THREE.Vector3(0, -mass * 9.81, 0));
+    // Update velocity & position
+    velocity.add(totalForce.divideScalar(mass).multiplyScalar(1/60));
     planeGeom.position.add(velocity.clone().multiplyScalar(1/60));
+    // Collision (raycast down)
+    let raycaster = new THREE.Raycaster(planeGeom.position, new THREE.Vector3(0, -1, 0));
+    let intersects = raycaster.intersectObject(terrain);
+    if (intersects.length > 0 && intersects[0].distance < 5) {
+        planeGeom.position.y = intersects[0].point.y + 2; // Don't go through ground
+        velocity.y = Math.max(0, velocity.y * 0.8);
     }
     // Controls
     if (keys.a) yaw -= 0.01;
     if (keys.d) yaw += 0.01;
     if (keys.q) roll -= 0.02;
     if (keys.e) roll += 0.02;
+    if (keys.s) pitch += 0.005;
+    if (keys.w) pitch -= 0.005;
+    // Apply rotations
+    planeGeom.rotation.order = 'ZXY';
     planeGeom.rotation.z = roll;
     planeGeom.rotation.x = pitch;
     planeGeom.rotation.y = yaw;
+    // Update sun position (day/night cycle)
+    let time = Date.now() * 0.00005;
+    sun.position.x = Math.sin(time) * 100;
+    sun.position.z = Math.cos(time) * 100;
+    sun.position.y = Math.sin(time * 0.5) * 50 + 50; // Rise/set
+    skyMat.uniforms.sunPosition.value.copy(sun.position);
+    ambientLight.intensity = 0.2 + sun.position.y / 200;
     updateInstruments();
     renderer.render(scene, camera);