Illustration was borrowed from a previous project for this experiment.
A sample of illustrations from the original project.
Simpler versions of the basic forms were reworked in Plasticity.
Wired Shelving Interactive 3D
A spontaneous side quest in browser-based invention.
Sometimes, when I’m ahead on assignments, I go off-script. This project started as one of those side quests—no one asked for it. I just saw a weirdly specific opportunity to visualize shelving in 3D on a product page and couldn’t let it go.
It began with a standard task I’d completed last autumn: create high-quality static renders of this Everbilt closet organizer kit to illustrate features like shelf width, depth, and other key features. Data we compiled from one of our data science feeds had flagged those attributes as important to shoppers, so I modeled everything cleanly in 3D to support what we call “Rich Content” at Home Depot—visual info that goes beyond the product photo carousel and product bullet points.
Most of our Rich Content consists of isometric vector illustrations, but I’d been 3D modeling most of my illustrations and rendering them in isometric view for a few years. We’d talked about 3D interactivity a few times since then, but building an interactive 3D version with something like Three.js would’ve required a small army of developers (and budget approvals). So the limitations kept us within the realm of vector art and 3D renders - all static imagery.
I revisited Vectary, a browser-based 3D platform I’d been quietly watching improve over time, and subscribed. I wanted to see if it could handle real, functional interactivity and do it without requiring too much bandwidth. It turns out it could do that and more. And it was fun. Really fun!
Try this interactive! Drag to orbit, pinch or scroll to zoom. The buttons work, too.
I’ve only just scratched the surface of what is possible with Vectary and this was done with only a day of experimentation. I learned a lot about how their system works. A model like this, for instance, is ideally suited to this implementation. Whenever a model is comprised of multiple repeated objects, you only need one object. So, this entire model, aside from interactions and cameras, is technically made up of five (5) pieces, which are then duplicated using arrays. This makes loading and rendering fast, even though the scene is complex.
So the workflow goes like this: I re-exported my original model into efficient lower-poly mesh components and imported them into Vectary, set up arrays for repeated parts, and built a new scene from scratch—optimized down to just 2.5mb. Then I added interactions, mapped them to buttons and actions in order to hide/reveal parts of the model depending on what the user clicked. The coolest part is how it tweens between different camera angles.
What you can do in the interactive
Shelf Width — Isolated shelf, dimensions visible
Shelf Depth — Top-down view, depth callouts
Hanging Rods — Highlights modular options
Overview — Reset to default camera view
Each button triggers a camera change and toggles the appropriate geometry and callouts.
Why this matters
This kind of visual interactivity is ideal for DIY-focused shoppers. It’s intuitive, lightweight, and infinitely clearer than a paragraph of bullet points. And unlike traditional image carousels, it encourages exploration.