Repository files navigation

A browser-based flight simulator built with Three.js that allows users to control an aircraft in a 3D environment using keyboard inputs.

• 3D environment with skybox and ground plane
• Basic aircraft physics (lift, drag, gravity)
• Controls for pitch, yaw, roll, and throttle
• Third-person and first-person camera views
• Flight instruments (altitude, speed, throttle, artificial horizon)
• Procedurally generated clouds

• W/S: Pitch up/down
• A/D: Yaw left/right
• Q/E: Roll left/right
• Shift/Ctrl: Increase/decrease throttle
• Toggle View Button: Switch between third-person and first-person views

1. Openindex.html in a modern web browser (Chrome, Firefox, Edge, etc.)
2. The flight simulator will start automatically
3. Use the keyboard controls to fly the aircraft

For the best experience, run the simulator using a local development server to avoid CORS issues with textures and models.

Using Python:

# Python 3python -m http.server# Python 2python -m SimpleHTTPServer

Using Node.js:

# Install http-server globallynpm install -g http-server# Run serverhttp-server

• index.html: Main HTML file with UI elements
• js/scene.js: Handles 3D scene setup, skybox, and ground
• js/aircraft.js: Aircraft model, physics, and cameras
• js/controls.js: Keyboard input handling
• js/physics.js: Flight physics calculations and environment elements
• js/ui.js: User interface and flight instruments
• js/main.js: Main application logic and animation loop

Aircraft physics parameters can be adjusted in theAircraft class constructor inaircraft.js:

// Physical constantsthis.maxSpeed=200;// Maximum speed in km/hthis.minSpeed=50;// Minimum speed to stay airbornethis.throttleAcceleration=20;// Acceleration per second at full throttlethis.dragFactor=0.01;// Air resistancethis.liftFactor=0.005;// Lift generation factorthis.weight=15;// Aircraft weight (gravity influence)this.rotationSensitivity={// Rotation ratespitch:0.03,yaw:0.02,roll:0.05};

To use a different 3D model, modify theloadDetailedModel method inaircraft.js. The simulator currently uses a simple placeholder model, but you can replace it with a more detailed GLTF or OBJ model.

The environment is created in theSceneManager class inscene.js. You can modify the skybox, ground plane, and lighting to create different environments.

The simulator is optimized for performance with:

• Frustum culling (built into Three.js)
• Simplified physics calculations
• Low-poly models for clouds and aircraft
• Efficient rendering techniques

If you experience performance issues:

1. Reduce the number of clouds in thecreateClouds method inphysics.js
2. Simplify the ground texture in thecreateGround method inscene.js
3. Use a simpler aircraft model

The simulator works best in modern browsers that support WebGL:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

Mobile devices are supported but not recommended due to the lack of keyboard controls.

Feel free to use, modify, and distribute this code as you wish. Attribution is appreciated but not required.