The Drone Control App is a single-page React application built with the help of the ViewAR SDK. It allows a user to control a drone's movement with two virtual joysticks displayed on the screen.

What will you build?

The app will be streaming the image from your device's back camera, with a 3D model of a drone placed in the real-scale. You'll be able to control the drone's movement with two virtual joysticks displayed on the screen.

To check out the final effect, download the ViewAR SDK App (either from the App Store or Google Play Store) on an ARKit/ARCore compatible device and input the following data:

Bundle ID: com.viewar.drone Version: 1

Screenshot from the Drone Control App

What exactly will you do & learn?

You'll checkout the unfinished Drone Control App from our Git Repository and finish it, following our step by step instructions. At the end of this tutorial you'll know how to:

  • activate the AR camera and tracking,
  • import a 3D model, activate its animation and manipulate pose,
  • use user input (from joysticks) to influence the behavior of the app.

How long will it take?

1-2 hours.

What will you need?

  • basic HTML & CSS knowledge,
  • intermediate JS skills,
  • know your way around any chosen IDE and GitHub.
Good to have:
  • basic React skills.

If you don't feel entirely comfortable in the skillset above, you might benefit more from trying the Templates Tutorials first.

  • ARKit compatible iOS device
  • ARCore compatible Android device

Check the list of compatible devices here.

Next Step >