Project Overview
This project was built when I was learning how to make 3D websites, serving as a comprehensive hands-on study of WebGL, shaders, camera movements, and 3D coordinate space on the web. It is an interactive 3D landing page and e-commerce experience celebrating the craft of Starbucks coffee. Built with React Three Fiber, users can manipulate a high-fidelity 3D cup model in real-time, customizing cup sizes, fluid fills, sleeve designs, and ingredient layers. The application orchestrates camera movements using GSAP ScrollTrigger to guide users through a sensory narrative, driving user engagement and product conversions.
Key Features & Scope
Real-time 3D product rendering with custom materials, lighting, and shadow casting
Interactive customizers for cup sizes (tall, grande, venti), liquid textures, and toppings
Performance-optimized GLTF models compressed to under 900KB using Draco compression
Responsive layout dynamically adjusting camera targets and viewport FOV for mobile users
System Architecture
A modular frontend SPA structured around a React Three Fiber canvas viewport. The 3D scene loads optimized meshes compressed via the Draco pipeline and stores user configurations in local state, triggering synchronized UI updates.
Biggest Challenge & Resolution
The Challenge
Rendering complex 3D meshes and high-res textures caused low frame rates (~15 FPS) and memory leaks on mobile browsers, making the page laggy and causing crashes.
The Resolution
Compressed textures to 1K WebP, applied Draco compression reducing model file size by 94%, and built an adaptive performance scaler that dynamically decreases anti-aliasing and pixel ratio on lower-spec mobile devices.