I’ve been experimenting with Three.js to explore what kinds of 3D tools could make sense for the Wine Rack America e-commerce site.
(I work on the engineering side of the Wine Rack America site. This post documents personal experiments and prototypes.)
The first experiment is a simplified version of the IKEA-style room planner: a tool that allows users to visualize wine racks inside a configurable room and experiment with different layouts. Right now I’m focused on building a small MVP to prove the core interaction model.
Planning wine rack layouts can be difficult with static product images, so the idea behind this prototype is to let customers visualize racks inside a room before purchasing.
The current prototype includes:
- A room with customizable dimensions
- Measurement guides to visualize wall lengths
- A custom orbit camera for scene navigation
- A menu that allows users to add racks to the scene (GLB models) via click or drag
- The ability to customize rack wood species and stain
The goal of this prototype is to see how far Three.js can go using our existing 3D models, and how those models could fit into the e-commerce sales experience. In a future post, I’ll also explore a different experiment: building a full 3D product configurator.