Three.js Cessna Demonstration

Overview

This project serves as an exploration of how aircraft are controlled in flight and was created as a capabilities demonstration of React, TypeScript, and Three.js over the course of a weekend .It features a Cessna 172 airplane model, a favorite of the creator, Greg Sullivan.

Features

• Interactive 3D Cessna 172 model
• Realistic lighting and textures
• Keyboard and mouse controls for model interaction
• UI controls for engine speed, turbulence, and flaps
• Informative dialog component that provides an introduction and technical details
• Created by Greg Sullivan, a pilot, developer, and animator

How to Run

• Requires v16 or higher.

1. Clone the repository
2. Navigate to the project directory
3. Run npm install to install dependencies
4. Run npm start to start the development server
5. Open http://localhost:3000 in your browser

Controls

• Drag your mouse to change your view
• Click on components to learn more about them
• Arrow keys for ailerons and elevator control
• Square brackets [ and ] for rudder control
• UI buttons for engine speed, turbulence, and flaps

Technology Stack

• React
• TypeScript
• Three.js
• GLTFLoader for 3D model loading
• TWEEN.js for animations

Source Code and Contributions

The code for this project is available in the GitHub repository. The model was generously contributed by Boba3d and then heavily modified by Greg Sullivan.

Future Enhancements

• Mobile support / responsiveness
• Additional models, scenes, and interactions
• VR support

Author

Greg Sullivan - (Greg@ArtOfSullivan.com)

License

This project is licensed under the MIT License.