Hyperrational

Flovatar's 3D model customiser

First released May 8, 2022

3D model customiser screenshot

Building from the work we did with Plastic Alchemy and Totem, Luca asked us if we could create a drop-in model customiser for his Flovatar project.

The screenshot shows the final result, but our contribution is the actual 3D model viewer itself, sitting seamlessly within the beautiful 2D environment Luca created.

The major challenges with this project were:

  1. The number of individuals parts that needed modelling and assembling (well over 500)
  2. Ensuring a clean interface between the two parts of the system
  3. Building a system that could cope with a lot of variations without eating too much bandwidth

While Jordan was working on sculpting the parts, we started sketching the layers we needed to work with, and built a system that allowed us to describe each display part in terms of what 3D models, layers, colours, and effects were required.

Working closely with Luca on the interface, we settled on using an iframe to hide a self-contained single-page React application and some example code to fire events within the frame.

We kept in touch closely while the modelling was being done, so ensure that we could share progress and identify problems early.

Build your own Flovatar!

Visit Flovatar