React demo with echo3D. Answer a few short questions to find a houseplant match, learn some info, and receive a QR code to see the plant in AR in your home!
Don't have an API key? Make sure to register for FREE at echo3D.
- Clone React-echo3D-demo-House-Plants
- Download Node and Node Package Manager(npm)
- Download and set up ngrok
- In the terminal, navigate to the
echoAR-Houseplant-Demo/directory and enter$ npm init - Next, enter
$ npm install express react react-domto install relevant packages
- Add each of the houseplants to your echo3D console. Use the search function and type in the plant name to find the model you would like to use for each plant.
These are the models we used : (Filename Author)
-
Anthurium.glb thesidekick
-
Chinese Money Plant.glb daniel
-
Umbrella palm tree.glb Poly by Google
-
ZZ Plant.glb Jack Irwin Miller
-
Bonsai Tree.glb zacharyfrs
-
Orchid.glb Poly by Google
-
Snake Plant (Highest Resolution, Unbounded).glb legel
-
Copy the links of the QRImage links, and place them into the "findplantInfo" function in [PlantForm.jsx].
-
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] -
Choose a plant to be your default and copy its QRImage link and shortURL into [index.html]
- In terminal, enter
npm startto serve the application on a local host. The terminal will display a port number that you can use in the next steps - In a separate terminal window navigate to
<path>/<to>/ngrokand enterhttp <port number>. The terminal will list a number of urls - the important one is the url beginning withhttps - To view on computer or mobile device, open up web browser and enter the ngrok url.
Refer to our documentation to learn more about how to use Unity and echo3D.
Feel free to reach out at [email protected] or join our support channel on Slack.
Demo created by Samia Menon.