Animating a 3D Object in AR

Add some fun to AR by showing an animated 3D object using wiarframe

Jeremiah Alexander
Mar 23 · 3 min read

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.


View the Finished Version

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.

wiarframe

Wiarframe empowers anyone to design AR experiences through…

Jeremiah Alexander

Written by

Founder @wiARframe — the design and prototyping platform for Augmented Reality.

wiarframe

wiarframe

Wiarframe empowers anyone to design AR experiences through an intuitive prototyping tool, a creator community and rich learning materials.

More From Medium

More on Prototyping from wiarframe

More on Prototyping from wiarframe

Displaying an Object in AR

More on Design from wiarframe

More on Design from wiarframe

Object Interactions & Gestures

More on AR from wiarframe

More on AR from wiarframe

Object Properties

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade