Every year on Dec 23rd, Rossmans across the east coast gather to pool the best (or worst) items they can find for under a dollar. Naturally, gifts at this price point tend to be amusingly peculiar. This year, we received some unfortunate, albiet expected news.

✉️ From: Grandma Rossman

There have been a lot of disappointments in 2020. I’m afraid there is one more to deal with. The Rossman Family Grab BAG is being BAGGED this year. So Sorry!

This 40+ year tradition would not be broken without a fight! I got in touch with my grandma and began working on a proposed alternative.

Approach

I wanted to use 3D media for the “gifts”, since shipping physical items would be cost prohibitive and opening up 2D images wouldn’t be very exciting. Sketchfab is the de-facto source of high quality 3D media, so I spent a week or so searching for obscure items that seemed to fit the budget style of the Grab Bag.

Models downloaded from Sketchfab are often very heavy, which is a problem for performance. I optimized each model by decimating and combining geometry, compressing textures, and baking texture atlases.

I curated a total of 35 optimized models to use as gifts. This includes a few original models I made from reference images of Grab Bag staples.

Design

The screen is occupied by a backdrop of my grandparents’ living room, and information such as the current picker is communicated through a card in the upper left.

I ran a small user testing session with my grandma on an early working prototype, which helped me refine the UI.

All of my users know how to use Zoom, so I used that as a base. As a bonus, I didn’t have to write any networking code. The idea was to use Zoom’s “remote control” feature to pass around a virtual bag of gifts to the meeting participants.

I implemented the app React, Three.js, and React-Spring. Building this experience with web technology offered rapid iteration during development that’s harder to achieve in an engine like Unity.

Results

Watch the video at the top of this page to see for yourself — it went great! Family members of all ages were able to participate with little to no training.

The app crashed once during the event, but luckily I was saving application state to local storage so we picked up right where we left off.

Learnings

This was the first user-facing application I’ve built with react-three-fiber. I learned:

How to use state management libraries
How to convert screen to 3D coordinates
What environment maps are for
How to handle mouse gestures
How to dynamically re-parent elements with portals