AR Dish & 3D Model Visualizer
- React 18
- TypeScript
- Vite
- Tailwind CSS
- shadcn-ui
- React Query
- WebXR
An immersive, cross-platform Augmented Reality (AR) experience that allows users to view high-fidelity 3D models of food dishes, furniture, and anatomy directly from their web browser. Built from scratch, focusing on high-performance 3D rendering.
Key Features:
- Interactive 3D Viewer utilizing Google's <model-viewer> for rotating, zooming, and panning 3D models directly on the web.
- Cross-Platform AR: Leverages Apple native AR Quick Look (.usdz) for iOS and Google Scene Viewer (.glb) for Android.
- Animation Playback: Built-in controls for playing, pausing, and cycling through 3D model animations directly from the UI.
- Dynamic Data Rendering: Utilizes a TypeScript catalog to dynamically render products, descriptions, and nutritional facts.
- PBR Environments: Adjusted exposure and shadow intensities for photorealistic model blending into real-world spaces.
My Role & Technical Approach:
I built the entire front-end of this project from scratch. Beyond the complex 3D integration, I focused heavily on performance and SEO, successfully achieving a perfect 100 score on Google Lighthouse. I optimized the model assets (.glb, .usdz, and .webp) and established a seamless bridge between vanilla web components and the React ecosystem.
Target Audience:
Restaurants, furniture retainers, and businesses seeking to elevate customer engagement via an immersive 3D/AR catalog.