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. It is a great website.. The Design looks very good.. Keep working like that!. Lahore escorts

    ReplyDelete
  4. Hi I read Your Post Its Very Helpful and Bookmark Your Site. That's why its more practical that you may appropriate study previous to developing. You'll be able to post more significant posting like this. This specific seems totally perfect. Every one of these little facts are made together with wide range of background knowing. Escorts in Lahore
    Escorts in Pakistan
    Escorts in Islamabad
    Escorts in Karachi

    ReplyDelete