3D Flight Simulator

I'll create a 3D flight simulation using Three.js for the 3D rendering and procedural generation. Here's the complete setup: 3D Flight Simulator

Controls: WASD - Flaps | Shift - Throttle | F - Fullscreen | ESC - Exit Fullscreen

Speed: 0 knots | Altitude: 0 ft

// Game variables let scene, camera, renderer, controls; let aircraft, runway, terrain; let aircraftType = ''; let speed = 0; let altitude = 0; let pitch = 0; let roll = 0; let yaw = 0; let throttle = 0; let isFlying = false; let fullscreen = false; // Key states const keys = { w: false, a: false, s: false, d: false, shift: false }; // Initialize the scene function init() { // Create scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Sky blue // Create camera camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(0, 5, 10); // Create renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Add lights const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // Create runway createRunway(); // Create terrain createTerrain(); // Event listeners window.addEventListener('resize', onWindowResize); document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); // Menu buttons document.getElementById('helicopter').addEventListener('click', () => { aircraftType = 'helicopter'; startGame(); }); document.getElementById('airplane').addEventListener('click', () => { aircraftType = 'airplane'; startGame(); }); // Fullscreen toggle document.addEventListener('keydown', (e) => { if (e.key === 'f' && isFlying) { toggleFullscreen(); } }); // Start animation loop animate(); } function startGame() { document.getElementById('menu').style.display = 'none'; createAircraft(); isFlying = true; } function createAircraft() { // Simple aircraft geometry (just a box for now) const geometry = new THREE.BoxGeometry(2, 0.5, 3); const material = new THREE.MeshPhongMaterial({ color: 0x555555 }); aircraft = new THREE.Mesh(geometry, material); aircraft.position.set(0, 1, 0); scene.add(aircraft); // Add controls controls = new THREE.PointerLockControls(camera, aircraft); scene.add(controls.getObject()); } function createRunway() { const runwayGeometry = new THREE.PlaneGeometry(100, 20); const runwayMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.8 }); runway = new THREE.Mesh(runwayGeometry, runwayMaterial); runway.rotation.x = -Math.PI / 2; runway.position.y = 0.01; // Slightly above terrain scene.add(runway); } function createTerrain() { const size = 500; const segments = 100; const geometry = new THREE.PlaneGeometry(size, size, segments, segments); // Generate height data const vertices = geometry.attributes.position; for (let i = 0; i < vertices.count; i++) { const x = vertices.getX(i); const z = vertices.getZ(i); // Generate height using Perlin-like noise const height = 5 * Math.sin(x * 0.05) * Math.cos(z * 0.05); vertices.setY(i, height); } geometry.computeVertexNormals(); // Create color gradient based on height const colors = []; const color = new THREE.Color(); for (let i = 0; i < vertices.count; i++) { const y = vertices.getY(i); if (y < 0) { color.setHSL(0.6, 0.7, 0.3); // Water } else if (y < 2) { color.setHSL(0.3, 0.7, 0.4); // Grass } else if (y < 5) { color.setHSL(0.25, 0.7, 0.5); // Light grass } else { color.setHSL(0.1, 0.7, 0.6); // Mountain } colors.push(color.r, color.g, color.b); } geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); const material = new THREE.MeshStandardMaterial({ vertexColors: true, flatShading: true, roughness: 0.8 }); terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; scene.add(terrain); } function updateAircraft() { if (!aircraft || !isFlying) return; // Apply throttle if (keys.shift) { throttle = Math.min(throttle + 0.01, 1); } else { throttle = Math.max(throttle - 0.01, 0); } // Apply controls based on aircraft type if (aircraftType === 'helicopter') { // Helicopter controls if (keys.w) pitch -= 0.01; if (keys.s) pitch += 0.01; if (keys.a) roll -= 0.01; if (keys.d) roll += 0.01; speed = throttle * 100; altitude += throttle * 0.1; } else { // Airplane 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; speed = throttle * 200; altitude += pitch * speed * 0.01; } // Apply physics pitch *= 0.98; roll *= 0.98; yaw *= 0.98; // Update aircraft position and rotation aircraft.rotation.set(pitch, yaw, roll); aircraft.position.x += Math.sin(yaw) * speed * 0.01; aircraft.position.z += Math.cos(yaw) * speed * 0.01; aircraft.position.y = Math.max(altitude, 0.5); // Update camera position relative to aircraft if (controls) { controls.getObject().position.copy(aircraft.position); controls.getObject().position.y += 1; controls.getObject().rotation.copy(aircraft.rotation); } // Update UI document.getElementById('speedometer').textContent = `Speed: ${Math.round(speed)} knots | Altitude: ${Math.round(aircraft.position.y * 100)} ft`; } function toggleFullscreen() { if (!fullscreen) { document.documentElement.requestFullscreen(); controls.lock(); } else { document.exitFullscreen(); controls.unlock(); } fullscreen = !fullscreen; } function onKeyDown(event) { switch (event.key.toLowerCase()) { case 'w': keys.w = true; break; case 'a': keys.a = true; break; case 's': keys.s = true; break; case 'd': keys.d = true; break; case 'shift': keys.shift = true; break; } } function onKeyUp(event) { switch (event.key.toLowerCase()) { case 'w': keys.w = false; break; case 'a': keys.a = false; break; case 's': keys.s = false; break; case 'd': keys.d = false; break; case 'shift': keys.shift = false; break; } } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); updateAircraft(); renderer.render(scene, camera); } // Start the game init();