drone-playground

Simple Drone Simulator for Educational Purposes Based on Babylon.js

This simulator was created as a simplified alternative to the AirSim based simulator previously used in classes. Only the parts related to horizontal movements, which the author uses in lectures, have been adjusted. Please do not expect too much.

TO RUN

Go https://maruta.github.io/drone-playground/
Press [Run] Button (many times)

CAMERA CONTROL

Camera location and orientation are controlled by Keyboard / Mouse(wheel) / Touch / Gamepad

↑ ↓ ← → PgUp PgDn Forward / Backward / Left / Right / Up / Down
W S A D Q E Horizontal (Forward / Backward / Left / Right) / Vertical (Up / Down)

EXAMPLE USAGE IN EDUCATION

Discuss the drone behavior corresponding to the PD controller designs submitted by the students. Press [Run] and [Resume] to start.

Design Comparison
- Press [Resume] to start
- The drones are placed in the X-Z plane in the order of gain crossing frequency and phase margin.
- Observe the difference in response due to gain crossing frequency and phase margin.
Race
- Drones are lined up in order of gain crossing frequency.
- After the second round, they switch to controllers of their own design
- After the third lap, the speed gradually increases.

LICENSE

This project is licensed under MIT License
Third-party libraries and resources within the vendor and dist folders (e.g., CSS frameworks, JavaScript libraries) are subject to their respective licenses. For more details, please refer to the license files of the respective projects.

Acknowledgements

The 3D model of drone (static/model/drone.glb) was provided by user 31415926 on sketchfab. It is licensed under the CC BY 4.0 License.

Local Development and Building

Follow these steps to develop and build the project on your local environment.

Prerequisites

Node.js installed (npm comes with it)
Visual Studio Code (recommended editor)

Setup

Clone or download this repository.
Open a terminal in the project's root directory.
Run the following command to install the necessary dependencies:
```
npm install
```

Starting the Development Server

To run the project during development:

Execute the following command:
```
npm start
```
Open http://localhost:9000 in your browser.

Building the Project

To build the project for production:

Run the following command:
```
npm run build
```
The built files will be output to the dist directory.

Developing with Visual Studio Code

If you're using Visual Studio Code for development:

Open the project's root directory in Visual Studio Code.
To start debugging:
- start the development server with npm start.
- Press F5 or select the Debug view (bug icon) from the activity bar on the left.
- Choose "Launch Chrome against localhost" from the dropdown menu.
- Click the green play button or press F5 to start debugging.

This project already includes a .vscode/launch.json file, so you can start debugging without additional configuration.

Using Visual Studio Code makes it easier to develop and debug TypeScript, allowing you to set breakpoints, watch variables, step through code, and more.

maruta/drone-playground