In this project, I made "Straw Struck," a high-performance interactive 3D configurator built for B2B ordering. This web app allows users to customize every aspect of a product in real-time—from dimensions and colors to material wrappers—and instantly generates a downloadable PDF quote with a screenshot of their custom design.
🚀 Key Features:
- Real-Time 3D Visualization: Built with React Three Fiber, featuring dynamic scaling and geometry swapping (Straight vs. Flexible).
- Procedural Textures: Zero image assets loaded! All textures (Paper, Film, Concrete) are generated programmatically via the Canvas API for infinite resolution and fast loading.
- Smart Validation: Enforces manufacturing constraints (MOQ, Length limits) automatically.
- Instant PDF Quotes: Uses jsPDF to capture the 3D scene and generate a professional order summary on the fly.
- Responsive Design: Fully optimized split-screen UI using Tailwind CSS that works seamlessly on mobile and desktop.
🛠️ Tech Stack:
- Framework: React 18 & Vite
- 3D Engine: React Three Fiber (Three.js / Drei)
- Styling: Tailwind CSS & Framer Motion
- State Management: Zustand / React Hooks
- PDF Generation: jsPDF