Responding to User Proximity in AR

Create AR objects that animate based on the user’s proximity

Jeremiah Alexander
Mar 23 · 4 min read

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

Uploading a 3D model

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

Adding Asset Info

Saving the Asset

Adding an Interaction to Start the Animation

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

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.

Checklist

Experience it on mobile

http://bit.ly/wiarframe-ios
http://bit.ly/wiarframe-android

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


View the Finished Version

Next Steps

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