Flight Simulator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js Flight Simulator</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; }
        canvas { display: block; }
        #ui { position: absolute; top: 10px; left: 10px; color: white; font-family: sans-serif; z-index: 10; }
        .hud { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.7); padding: 8px; border-radius: 4px; color: #fff; font-size: 14px; }
    </style>
</head>
<body>
    <div id="ui">
        <select id="aircraftSelect" style="margin-bottom:5px; padding:2px;"></select>
        <button id="resetBtn">Reset</button>
    </div>
    <div class="hud" id="hud"></div>
    <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
    <script>
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambientLight);
        const dirLight = new THREE.DirectionalLight(0xffffff, 1);
        dirLight.position.set(100, 200, 100);
        scene.add(dirLight);

        // Terrain
        const terrainGeometry = new THREE.PlaneGeometry(500, 500, 64, 64);
        const terrainMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22, side: THREE.DoubleSide });
        const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
        scene.add(terrain);

        // Physics
        let aircraft = null;
        let selectedAircraft = 0;
        const aircraftData = [
            { name: "Cessna 172", maxSpeed: 210, thrust: 180, lift: 1.2, drag: 0.02, turnRadius: 300, weight: 1200, maneuverability: 0.8 },
            { name: "F-16 Fighting Falcon", maxSpeed: 1500, thrust: 35000, lift: 1.5, drag: 0.05, turnRadius: 50, weight: 14000, maneuverability: 1.2 },
            { name: "Boeing 747", maxSpeed: 920, thrust: 60000, lift: 2.0, drag: 0.08, turnRadius: 800, weight: 250000, maneuverability: 0.5 }
        ];

        function createAircraft(modelUrl, data) {
            const loader = new THREE.GLTFLoader();
            loader.load(modelUrl, (gltf) => {
                const aircraftModel = gltf.scene;
                aircraftModel.position.set(0, 5, -50);
                aircraftModel.scale.set(0.1, 0.1, 0.1);
                aircraftModel.userData = { ...data, model: aircraftModel };
                scene.add(aircraftModel);
                return aircraftModel;
            });
        }

        // Controls
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.screenSpacePanning = false;

        document.getElementById('aircraftSelect').innerHTML = aircraftData.map((a,i) => `<option value="${i}">${a.name}</option>`).join('');
        document.getElementById('aircraftSelect').addEventListener('change', (e) => {
            selectedAircraft = parseInt(e.target.value);
            if (aircraft) scene.remove(aircraft);
            createAircraft(`models/${aircraftData[selectedAircraft].name.toLowerCase()}.gltf`, aircraftData[selectedAircraft]);
        });

        // HUD
        const hud = document.getElementById('hud');
        function updateHUD() {
            if (!aircraft) return;
            const data = aircraft.userData;
            hud.innerHTML = `Altitude: ${data.altitude.toFixed(0)}m | Speed: ${(data.speed).toFixed(0)} km/h | Pitch: ${data.pitch.toFixed(1)}° | Roll: ${data.roll.toFixed(1)}° | Thrust: ${data.thrust.toFixed(0)}N`;
        }

        // Physics state
        let time = 0;
        function updatePhysics(delta) {
            if (!aircraft) return;
            const data = aircraft.userData;
            // Simplified physics model
            data.speed += data.thrust / data.weight * delta * 100; // basic acceleration
            data.pitch += (data.thrust - data.drag * data.speed) / data.weight * delta * 50;
            data.roll += (data.thrust * 0.3 - data.drag * data.speed) / data.weight * delta * 30;
            data.altitude += data.speed * Math.sin(data.pitch * Math.PI/180) * delta * 10;
            // Clamp altitude
            if (data.altitude < 0) data.altitude = 0;
        }

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            time += 0.016;
            controls.update();
            renderer.render(scene, camera);
            updateHUD();
        }
        animate();

        // Window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth/window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // Initial load
        camera.position.set(0, 100, 200);
        createAircraft(`models/${aircraftData[selectedAircraft].name.toLowerCase()}.gltf`, aircraftData[selectedAircraft]);
    </script>
</body>
</html>
<!-- agent-meta {"model":"liquid/lfm2-24b-a2b","provider":"lmstudio","persona":"basic","sessionId":"0819e02b-060e-45ca-a14e-1d6ce0074fc4","tokensIn":1281,"tokensOut":1516,"tokensTotal":2797,"cost":0,"turns":1,"toolCalls":0,"failedToolCalls":0,"timestamp":"2026-08-01T04:51:41.814Z"} -->