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.

How it’s made

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

3D Models & Styles

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.

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.