Animating a 3D Object in AR
Add some fun to AR by showing an animated 3D object using wiarframe
In this tutorial, we’ll use the wiarframe editor to upload an animated 3D model that we found online. We’ll then use the Wiarframe app to preview it in AR.
If you haven’t already, sign up for a free wiarframe account, get an overview of the platform, and check out this introductory tutorial for displaying an object in AR.
To get started, create a new table top wiarframe and call it ‘Tiny Dancer’.
Adding an Animated Object
Click on the scene canvas to bring up the new object form. Let’s create a 3D object and call it ‘Tiny Dancer’. Rather than use one of the automatically suggested 3D models, we’ll upload our own.
Uploading a 3D model
We’ve previously used Google Poly as a source for 3D models, but when we want something more detailed or animated SketchFab is a better option. It is a website with a huge selection of creative-commons-licensed high-fidelity 3D models.
Have a look at this Bear, it’s a bit silly but also super cute and has a nice animation included. You can download the source files for it by clicking the download button below the author’s name. You’ll be given a few different format options, and you should pick FBX, this is a simple widely supported option that includes support for animation.
Expand the downloaded zip folder, and you’ll find two files that we need. A .fbx geometry file and a .jpeg texture file. Drag the FBX file onto the upload box in the New Object form, which will popup the Asset Manager, where we can customize the uploaded file.
Uploading the Texture
In the Main Style, drag to upload the downloaded .jpeg texture file to the upload box. While here, you can also click on the colour swatch to change the main material colour. If we pick orange, we’ll get a sweet teddy bear look.
Adding Asset Info
We should also add the attribution text — “cweishaar on Sketchfab” and perhaps name the model something more descriptive, like “Dancing Bear”.
Saving the Asset
The last step is to scroll to the bottom and hit save, to assign the asset to your 3D object. Next hit create to add your object will be added to the scene.
Adding an Animation Property
Our Bear won’t dance automatically, so we’ll need to tell it to by adding an Animation property — read more about object properties. Click on the Additional Property button in the inspector, and select the Animation property from the popup.
If we expand the new animation drawer, we’ll see a list of all animations included on the 3D Model, let’s select the one called mixamo and toggle on the loop option.
Experience it on mobile
Let’s view it in the App. If you haven’t already, download either the iOS or Android app.
http://bit.ly/wiarframe-ios
http://bit.ly/wiarframe-android
Launch the App, log in, then select and load the ‘Tiny Dancer’ wiarframe. You’ll need to move your device around so that the camera can detect a tabletop. Tap on the surface you want to use, reposition your scene if needed, and finally begin the experience. You should now have a cute tiny dancer on your desk.
One Last Thing
Add a description, and upload a thumbnail. Take a screenshot from the app and upload that in the editor — tap on the Cog icon in the header bar to bring up the wiarframe settings. You can also save this to your ‘Getting Started’ collection.
Next Steps
You can experiment with different models, with different animations. In the next lesson, we’ll look at how we make something more interactive.
