How to Choose the Perfect Houseplant in Augmented Reality (AR) [Tutorial]

Looking to figure out what houseplant you should get? This React demo with echoAR can help! Just answer a few short questions to find a houseplant match, learn more info about it, and receive a QR code to see the plant in AR in your home! The full demo can also be found on echoAR’s GitHub.

Register

Don’t have an API key? Make sure to register for FREE at echoAR.

Setup

1. Clone echoAR-Houseplant-Demo
2. Download Node and Node Package Manager(npm)
3. Download and set up ngrok

Terminal

1. In the terminal, navigate to the echoAR-Houseplant-Demo/ directory and enter $ npm init
2. Next, enter $ npm install express react react-dom to install relevant packages

echoAR Console

1. Add each of the houseplants to your echoAR console. Use the search function and type in the plant name to find the model you would like to use for each plant.
2. These are the models we used : (Filename Author)
3. Anthurium.glb thesidekick
4. Chinese Money Plant.glb daniel
5. Umbrella palm tree.glb Poly by Google
6. ZZ Plant.glb Jack Irwin Miller
7. Bonsai Tree.glb zacharyfrs
8. Orchid.glb Poly by Google
9. Snake Plant (Highest Resolution, Unbounded).glb legel
10. Copy the links of the QRImage links, and place them into the “findplantInfo” function in [PlantForm.jsx].
11. Once the houseplant models are added, copy the short URL generated for each model and use them to replace the [shortUrl] in the "findplantInfo" function [PlantForm.jsx]
12. Choose a plant to be your default and copy its QRImage link and shortURL into [index.html]

Run

1. In terminal, enter npm start to serve the application on a local host. The terminal will display a port number that you can use in the next steps
2. In a separate terminal window navigate to <path>/<to>/ngrok and enter http <port number>. The terminal will list a number of urls - the important one is the url beginning with https
3. To view on computer or mobile device, open up web browser and enter the ngrok url.

Learn More

Refer to our documentation to learn more about how to use Unity and echoAR.

Support

Feel free to reach out at [e-mail] or join our support channel on Slack.

Screenshots

Demo created by Samia Menon.

---

echoAR (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 AR/VR apps and experiences.