In this project, I made by Muhammad ZakriaIn this project, I made by Muhammad Zakria

In this project, I made

Muhammad Zakria

Muhammad Zakria

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
Like this project

Posted Jul 3, 2026

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 a...