AR Toy Designer in Wiarframe

Using AR we can visualise any object in our home, explore it in 3D detail and customise it to match our environment. This is the future of retail, let’s explore it with a fun anime figurine designer.

Jeremiah Alexander
Jul 24, 2019 · 3 min read

How it’s made

The scene consists of the three characters and a selection of paint buckets.

All 3D models were sourced from Google Poly. The characters have then been set up with 3 styles each. Each style changes some of the material colours.

Each Character has a starting position, rotation and scale. One character is positioned to the back left, one to the back right and one to the center. The center character is slightly larger and faces forward, whilst the background models face inwards.

Each character has two interactions…

when the user taps on it (in the left position), it moves to the center, moving the other pieces around in a counter-clockwise direction, and also tells all the paint cans to target it — more on that later

when the user taps on it (in the right position), it moves to the center, moving the other pieces around in a clockwise direction, and tells all the paint cans to target it.

There are six paint cans in the scene (one for each of the supported colours). Each paint can has one or more interactions that are triggered by a user tap, and will change the style of a specific character.

The trick we use here is that when the user selects a character the interactions on the paint can change and thus only the selected character is recoloured, this way we can reuse the same paint cans across all characters.

Potential improvements

There are a lot of extensions we can add to this experience, such as hiding and showing accessories, displaying character information or even exploring how this might work as retail experience by linking out to an online store.

One limitation we have with our current style system in wiarframe is that a new style completely replaces the old style. This means that we cannot, for example, change the colour of the armour and the boots independently. This would be a good addition for a more fully-fledged experience.

How it looks

Log in to the Wiarframe app to try it for yourself. The wiarframe is set to open, so you can also inspect it and remix it in the editor — there’s also a video below.

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 Prototyping from wiarframe

More on Prototyping 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