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 · 3 min read

How it’s made

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

3D Models & Styles

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

Position, Rotation & Scale

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.

Character Interactions

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.

Paint Can Interactions

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.

Cascading styles

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 an intuitive prototyping tool, a creator community and rich learning materials.

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.

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