WebVR: Adding 3D models to AR

Confession time, I have been struggling a little bit, to work out how to add previously developed models in AFrame. The problem has been, I am using Glitch, which is great, to play with AFrame and AR; the issue has been adding more than one file as an asset into it that are linked or some of the assets are in subfolders.

So lets started with the model, I want this (shown below or something like it) to appear when a specific marker is shown to a camera. The model below can found at https://sketchfab.com/3d-models/juicy-salif-d5d126549f254e21bfc1200eac7a38f1 and is released under a Creative Commons licence by Marco_Romero

JUICY SALIF by Marco_Romero on Sketchfab

It is the glTF version I need, which is often recommended for including models in AR systems.

The solution so far, via Github:

1. Create a repository with GitHub, I have called mine temp (for originality) and copy the files across; in this case just two scene.gltf and scene.bin.
2. With the new repository go to the settings and near the bottom of all the options find the section marked GitHub pages and create a project page, using the Master branch and choose a layout.
3. Go back to the Code page and create a README.md if you have already done and then 'commit' this.
4. Now we start using it in Glitch (example of the code is below) you might have to play with the scale bit. As an example, this one needed to be X20 smaller achieved through the scaling attribute on the a-entity code.

Now we can play https://linen-sagittarius.glitch.me/ - it reminds me of an alien a bit.

It still need to play with this a bit, but so far it is a step forward,



Resources

• AR and VR activities using the session - Slides and Links
• Guide and Resources for producing AR via AFrame

• 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 and opinions are the author's and do not necessarily reflected those of any organisation they are associated with. Twitter: @scottturneruon