Back to work
2025Frontend Engineer (solo)
3D Product Showcase
An e-commerce viewer that stays under a second
Most 3D e-commerce demos look great on a fast laptop and choke on a phone. The goal was a real-time product viewer that stayed smooth on mid-range mobile.
No credentials required - open to explore the 3D world!
The problem
Uncompressed 3D assets made the page load slowly on mobile, and a naive loading state blocked the main thread - so the 'premium' experience was worse than a plain image gallery.
What I built
- Compressed every GLB with DRACO, cutting the asset bundle from roughly 108MB to 29MB with no geometry loss.
- Used PMREM image-based lighting and ACES tone mapping to keep materials physically believable without expensive scene work.
- Throttled the load-progress updates so React state changes never janked the render loop.
- Added a model cache and sliding product transitions so switching products is instant on the second view.
Outcome
73%
Smaller 3D assets (108MB → 29MB)
Silky
Progress without main-thread jank
Accessible
Labelled controls + full OG metadata
Stack
Next.jsThree.jsTailwindFramer Motion