WebVR: Adding animated 3D model to AR

In a previous post I looked to experimenting with adding 3D models in glTF form (GL Transmission Format) into AFrame as part of an Augmented Reality (AR) applications. In this post, the idea is extended to animated models with multiples of files.


I am going to be using the 3D animated model by OncleBen released under a Creative Commons Licence at https://sketchfab.com/3d-models/low-poly-character-rpg-kit-animation-904c06fc53574534a3aace8dba79f796 SketchFab is a great resource for these models.

Low Poly Character RPG Kit Animation by OncleBen on Sketchfab

The method is essentially the same as in the previous post

1. Create or add as a new folder with a repository in GitHub, I have called mine temp (for originality) and copy the files across. This is where the biggest changes happen, you will need to create folders within the repository - a good description on how to do this is available at https://github.com/KirstieJane/STEMMRoleModels/wiki/Creating-new-folders-in-GitHub-repository-via-the-browser. Try to keep the file structure similar to the original files structure, so this might mean creating a further subfolder for the textures.
2. If you haven't already created a project webpage for the repository:
1. 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.
2. Go back to the Code page and create a README.md if you have already done and then 'commit' this.
3. 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 X200 smaller; achieved through the scaling attribute on the a-entity code.
4. The animation needs an extra file include in the header https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js to add the function animation-mixer to the a-entity. 

Code


The app: https://far-ostrich-1.glitch.me/ you will also need the Hiro marker (see below)

Example

via GIPHY

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 
• Adding 3D models to AR https://computingnorthampton.blogspot.com/2019/07/webvr-adding-3d-models-to-ar.html

All views and opinions are the author's and do not necessarily reflected those of any organisation they are associated with. Twitter: @scottturneruon