Tuesday 9 July 2019

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.




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




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

4 comments:

  1. 3D displaying is the method of making a three-dimensional computer show which speaks to a 'real-world' protest. It is utilized in a wide assortment of businesses. This incorporates gaming, architecture and item advancement. There's no shock that the development industry has taken after in these tech-advancing strides and has embraced these advancements. Get 3d modeling services Denver, Colorado

    ReplyDelete
  2. When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get three emails with the same comment. Is there any way you can remove me from that service? Cheers! read review

    ReplyDelete
  3. This is an awesome article, thank you for sharing.
    Regards,Animation Studio

    ReplyDelete
  4. This blog is truly useful to convey refreshed instructive issues over web which is truly appraisable. I discovered one effective case of this truth through this blog. I will utilize such data now. Online decoration and lighting

    ReplyDelete