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 to execute the code
• Use [Pause] to pause/resume the simulation
• Use [Reset time] to reset the simulation time
• Use [Despawn All] to remove all drones from the scene

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)
• Mouse wheel: Zoom in/out
• Touch: Tap to follow drone, pinch to zoom, drag to rotate camera
• Hide Code / Show Code button to toggle code editor visibility

EXAMPLE USAGE IN EDUCATION

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

• Design Comparison

  • 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

1. Clone or download this repository.

2. Open a terminal in the project's root directory.

3. Run the following command to install the necessary dependencies:

npm install

Starting the Development Server

To run the project during development:

1. Execute the following command:

npm start

1. Open http://localhost:9000 in your browser.

Building the Project

To build the project for production:

1. Run the following command:

npm run build

1. The built files will be output to the dist directory.

Developing with Visual Studio Code

If you're using Visual Studio Code for development:

1. Open the project's root directory in Visual Studio Code.

2. 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.