In this tutorial, we’ll use the wiarframe editor to set up an animated 3D model so that its animation plays based upon the user’s proximity.
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. This lesson is very similar to the Responding to User Gaze tutorial.
To get started, create a new table top wiarframe and call it ‘Air Fish’.
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 ‘Fish’. Rather than use one of the automatically suggested 3D models, we’ll upload our own.
Uploading a 3D model
We love the 3D models on SketchFab. Today we’re going to this Anemone scene by Damco. You can download the source files for it by clicking the download button below the author’s name. Download the FBX version.
Expand the downloaded zip folder, and you’ll find two files that we need. A geometry file (anemone.fbx) and a texture file (anenomeTex.png). 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 texture file to the upload box.
Adding Asset Info
We should also add the attribution text — “Damco on Sketchfab”.
Saving the Asset
The last step is to scroll to the bottom and hit save, and assign the asset to your 3D object. Next hit create to add your object to the scene.
Adding an Interaction to Start the Animation
When the user gets within an arm’s reach of the Fish, we want the animation to begin. This Reach gesture triggers when the user get’s within 1 meter of the object — read more about interactions.
Click on the Interactions drawer in the inspector, and click the New Interactionbutton. In the form, add an interaction so that when the user reaches the fish, the fish will Animate.
This will create a new Action tab called Animate.
In the new Animate tab, we can configure the properties that this action will change. Set the Animation property to Take 001 and enable looping.
Let’s also rename this action to be called Swim. Tap on the more icon next to the action name and chose the Edit Action option. From the form that appears you can change the name to Swim, you can also change the colour and icon used to identify the state — I like green for go.
Adding an Interaction to Stop the Animation
When the user leaves arm’s reach of the fish, we want the fish to stop swimming. With the Swim Action selected, add an additional property to change the interactions. This will allow us to enable a unique interaction, once the action has been performed.
Click on the Interactions drawer in the inspector, and click the New Interactionbutton. In the form, add an interaction so that when the user leaves reach of the fish, the fish will perform a Custom Action that we’ll call Stop.
In the new Stop Action tab, add a new animation property and set it to None. Then add a changes interaction property and enable only the Reach interaction.
Done correctly, your object should have two Actions in additional to it’s initial state. The properties and interactions of each are show below.
Experience it on mobile
Let’s view it in the app. If you haven’t already, download either the iOS or Android app.
Launch the app, log in, then select and load the ‘Air Fish’ 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 begin the experience. You should now have your own eco-friendly air Fish that swim when you get near and chill when you move away.
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.
Proximity has three different distance you can work with. Social distance (3m), Reach (1m) and Embrace (30cm). Try changing the proximity gesture used to create a different experience.