CalypsoAR

To start out with any AR project you are probably going to want some 3D models to display. You can use a free tool like blender or other 3D modeling software. We have found that blender is the best tool for exporting the models. If you want this to work on both android and iOS web browsers you will need to download this blender export extension from Github. Once you have exported a .glb file for android and a .usdz file for iOS you can then move on to the next step with A-frame and Glitch.com

For this part of the project all you need to do is go here and click on the top left title and then click on REMIX PROJECT! to make your own version of the project. You might need to create and account to save this remix. Then go to the assets folder and replace the files we have with the .glb and .usdz file. Then all you need to do is change the two lines highlighted in the html file to the links provided in the asset folder. Just make sure that you have set the .glb link to the src line and the .usdz file to the ios-src line. Then click on the share button to get a link to the project. If all you want is to see your 3D model in AR this should be it, you will get a clean scene that you can open through the browser on your phone to see the model using model-viewer. If you want to embed this model into your site, follow the instructions in the next step

We use squarespace as our content management site and will be embedding the link to our model-viewer scene directly into the page. Create a new page or find the page you want to embed the code into and then click on the + sign button at the top of the page. Search for "embed" in the dialogue box that comes up. Once the embed feature opens click on the "</>" and then paste the following into the box. We decided on a width of 400px which looks good on most phones. Just replace "your link" with the share link from glitch

<iframe src="your link" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" 

height="600px" width="400px" allowfullscreen></iframe>

We have decided to add some interactivity to our project by including the ability for users to upload voice comments directly through the website. To accomplish this we are using a service called speak pipe to embed this in your site just create a free account and follow their instructions to get the embed code and then add it to your project in the same way we embedded the model-viewer scene