1. Introduction
So if we go to
Using the markers above with this url running on your device (with a camera enabled) it should add two new objects over the markers. you will need a copy of these images printed out. If you have it I would suggest running it in Firefox.
2. Getting Started
The guide for all this is https://aframe.io/blog/arjs/, with this you have pretty much everything you need.
In the index.html deleted everything in there and replace it with
Should have a white box over the Hiro marker when the web camera/phone/tablet is shown the markers.
The code not in bold below just sets it up - to play with it we don’t need to worry about what it does - we can just use it. The bit in bold is the bit initially we change or add to – in this case it puts a default white box over the marker.
It can be seen at https://decisive-cookie.glitch.me
3. Playing with other objects
Now if we replace
With
We get a blue ball in place of the box
Now for some fun
Go back to Glitch, and if we go to assets we can add the image. Open up the folder that has the downloaded image and drag it into the asset window.
When it stops downloading and shows the image, click on the image to get the new web address we are going to need that next. so take a copy of it.
If we replace
With the following by just adding in src="https://cdn.glitch.com/04b86bba-0978-4bf4-b3a7-2ece72336f90%2FBee-PNG.png" as below
We get a blue ball with a bee stretched over it. But it doesn’t look that great if we remove the color=”blue” we see the bee stuck at the bottom of the ball still but the colours are back.
Now if we replace
With commands to rotate the sphere
We get a rotating sphere with the image on it.
If you want to find out how I felt about presenting go to https://dandy-custard.glitch.me/
Now let's try a GIF
Download the GIF and then copy (drag and drop) into the asset folder of your project get the web address and put into src=”” in place of the one that is there already
4. Issues and Thoughts
- Make sure all the markers have white space surrounding them.
- Video is fun
- It is browser dependent on Firefox https://thimbleprojects.org/scottturneruon/692403 would place a video on Chrome and so others it is a static image.
- There are ways around it https://cloudy-nation.glitch.me a play button is added but it does involve more code https://glitch.com/~cloudy-nationWallace https://www.northampton.ac.uk/directories/people/roy-wallace/
- The QR code approach doesn’t always work with all phones and tablets.
- If I am honest, the technology is cool and useful for educational use, but I not sure where it all can go. The question is what can others come up with to use it, I would love to hear about it.
Related Links
- How to videos... Web based Augmented Reality https://robotsandphysicalcomputing.blogspot.com/2018/12/how-to-videos-web-based-augmented.html
- Basic guide and starting point https://aframe.io/blog/arjs/#move-the-camera-or-the-marker
- Example: White block (needs the Hiro marker) https://gregarious-fibre.glitch.me/
- Example: An image is added to block (needs the Hiro marker) https://glitch.com/~dandy-custard
- Further guidance on setting up AR through AR.js https://robotsandphysicalcomputing.blogspot.com/2018/07/webvr-3-playtime-augmented-reality.html
- Further guidance adding objects into AR https://robotsandphysicalcomputing.blogspot.com/2018/07/webvr-4-playtime-putting-objects-into.html
- Guide on adding video into AR https://robotsandphysicalcomputing.blogspot.com/2018/10/webvr5-playtime-augmented-reality-to.html
All views are the authors, and may not reflect the views of any organisation the author is connected with in any way.
