How to Create an Augmented Reality App
Tags: tutorial, beginners, augmentedreality, unity3d
Published: 2020-08-17 21:02:32

Ever wondered how easy it could be to create an augmented reality (AR) experience? Ponder and wonder no longer! Here’s a step-by-step guide to quickly create and even share a cloud-connect AR experience!

{% vimeo 406698703 %}

# **Step 1: 🔑 Get an API key**

> Learn how to get an access key to start building 3D applications.

This is the easy part. Head over to echoAR’s  [registration page](https://console.echoar.xyz/).


1. Fill out the form with your name and email address
2. Choose a plan (all start **free** 🎉)
3. Set a password
4. Check that you agree to our  [Term of Service](https://www.echoar.xyz/terms).
5. Click the **register** button.

**That’s it!** Check your inbox for an automatic email with your key 🔑.


- *Check your spam folder if you don’t get an email within a few seconds*

![1.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611091668342/RiSOtb7c1.gif)

# **Step 2:💻 Access the console**

> Learn how to get to the console and load your API key.

Now that you have an API key, you are all set to start working with the console. Upon registration you will be redirected to the console or you can use the link in the registration email to get back to the console anytime.

Make sure your 🔑 is set in the header or type and load it yourself.

![2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611091748290/E348M9ABO.gif)

# **Step 3: 🎲 Add a 3D model**

> Learn how to add a 3D model to the console.

You can add content by clicking the “**Add To Cloud**” button.

Click on one of the sample models, then “Next”, “Next” again, and then “Done”. Wait for the model to upload and appear in the Content page.

![3.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611091809419/QOWmFIXul.gif)


- Use the **search** bar to find free 3D models that you can instantly add to the console.
- You can **find** additional free 3D models on  [Google Poly](https://poly.google.com/),  [Sketchfab](https://sketchfab.com/),  [TurboSquid](https://www.turbosquid.com/),  [Sketchup’s 3D Warehouse](https://3dwarehouse.sketchup.com/),  [Clara.io](https://clara.io/) , and  [Archive3D](http://archive3d.net/).
- You can **create** your own 3D models with  [Tinkercad](https://www.tinkercad.com/),  [Blender](https://www.blender.org/),  [Fusion 360](https://www.autodesk.com/products/fusion-360/overview),  [MagicaVoxel](https://ephtracy.github.io/),  [Maya](https://www.autodesk.com/products/maya-lt/overview),  [Maya LT](https://www.autodesk.com/products/maya-lt/overview), and  [Maxon Cinema4D](https://www.maxon.net/en-us/) or use  [3D scanning apps](https://medium.com/3d-scanning/3d-capture-apps).
- Learn more about the types of supported 3D content (e.g, models, videos, and image) [here](https://docs.echoar.xyz/web-console/manage-pages/content-page/holograms-and-targets).

# **Step 4: 👀 See it in AR**

> Learn how to instantly see 3D models in AR through your phone.

## Option 1: on the floor, instantly
Click on the “**[ ]**” icon to generate and show the QR codes. Make sure the “**See on the floor**” tab is selected and shows a QR code that can be detected by the camera.

- *If this tab does not exist, continue to the other options*

![4.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092308825/SsKXi01pI.gif)

Scan the QR code with your phone’s camera app or with a QR reader app.

- *Latest iOS and Android phones are able to read QR code with their default camera apps.*

Click the pop-up message to get redirected to our website.

![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092335159/n5MCMLPg0.png)

Click the “**See in AR**” button.

Move the phone around until it detects the surface around you and tap the screen to place the 3D model on the floor around you. You can scale the model by pinching the screen with two fingers.

![6.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092364118/wCmEhjso6.gif)

**You did it! 🎉**

## Option 2: on an image

Click on the “**[ ]**” icon to generate and show the QR codes.

Choose the “**See on an Image**” tab to show a QR code that can be detected by the camera.

![7.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092393423/mdy0uiIMs.gif)

Scan the QR code with your phone’s camera app or with a QR reader app.

- *Latest iOS and Android phones are able to read QR code with their default camera apps.*

Click the pop-up message to get redirected to our website. Your browser should open.

- *You might need to allow camera access. In iOS, only Safari browsers are allowed to access the camera. In Android, Chrome browser is recommended as the default browser.*

Your camera should open in the browser. Troubleshoot camera issues here.

**Keep your camera pointed to the QR code to see the 3D model appear on top of the QR code.**

![8.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092438942/iS3APYZct.gif)

**You did it! 🎉**

## Option 3: on the floor, through the mobile console

Go to the console in your phone’s browser by typing  [console.echoAR.xyz](https://console.echoar.xyz/) or scan the QR code below get redirected automatically.

![9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092471876/muZn1r1CE.png)
##### Scan to go to the console

Make sure you are logged in and that your key is loaded.

Click on the “**[expand]**” icon next to the model preview.

![10.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092574557/4hzV_wsM6.jpeg)

![11.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092584411/rBPiSXF5w.jpeg)

You will get redirected to our website.

![12.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092597099/v4n9Ugy7E.png)

Click the “**See in AR**” button.

Move the phone around until it detects the surface around you and tap the screen to place the 3D model on the floor around you. You can scale the model by pinching the screen with two fingers.

![13.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092631259/_f2n6Mw4Q.gif)

**You did it! 🎉**

# Optional: 💗 Share it with others

> *Learn how to instantly share 3D models and allow others to see 3D models in AR through their phone.*

You can generate a short link and share it with others so they can see the same 3D model you have in the console.

Click the “<” icon to automatically copy a short link to the model into your clipboard. You are also able to automatically share it through WhatsApp, Twitter, Facebook, LinkedIn, and Reddit.

![14.jfif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092663437/HSCa2sbib.jpeg)

- The short link should look something like: https://go.echoAR.xyz/ABCD

Paste and share the link with friends on **social media** or **send it as text**. Sharing this link will automatically give other access to the model and also show a QR code they can scan for easy access. For example:

![15.jfif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092701448/avOXeguWT.jpeg)

Clicking the short link redirects to our website where they can click the “**See in AR**” button to place the 3D model on the floor around them.

![16.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092725116/pqY-iak_O.gif)

# ❔ Troubleshooting

> *What to do when things don’t work as expected.*

Troubleshoot issues  [here](https://docs.echoar.xyz/quickstart/troubleshooting). You can check out our full documentation for other useful tutorials  [here](https://docs.echoar.xyz/).

-----

> **echoAR** ( [www.echoAR.xyz](http://www.echoar.xyz/); Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy 3D apps and experiences.

![17.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611092787261/7g1oBZj9e.png)