ecommerce-ar-tryon

🛍️ E-commerce AR Virtual Try-On

Augmented Reality Product Visualization for Online Shopping

🌟 Features

• Dual Mode Experience - VR Showroom & AR Try-On
• 3D Product Visualization - Interactive 3D models
• Product Catalog - Browse multiple categories
• Real-time Controls - Scale, rotate, and customize products
• Shopping Cart - Add items and track orders
• Share Functionality - Share products with friends
• Mobile AR - Place products in your real space
• VR Showroom - Immersive shopping experience

🎯 Demo

Live Demo: https://harikapadia999.github.io/ecommerce-ar-tryon/

Product Categories

• 🛋️ Furniture (Sofas, Tables)
• 💡 Accessories (Lamps, Mirrors)
• 🏺 Decor (Vases, Art)
• 🔊 Electronics (Speakers)

🚀 Quick Start

VR Showroom Mode

1. Open the demo link
2. Click “VR Showroom” button
3. Browse products in 3D space
4. Click products to view details
5. Add to cart and customize

AR Try-On Mode

1. Open the demo link on mobile
2. Click “AR Try-On” button
3. Point camera at a flat surface
4. Tap to place products
5. Pinch to scale, drag to rotate

💻 Technology Stack

• A-Frame 1.5.0 - WebVR framework
• AR.js - Web-based augmented reality
• A-Frame Extras - Additional components
• HTML5/CSS3 - Modern web standards
• JavaScript ES6 - Interactive functionality

🎮 Controls

VR Showroom

• Mouse Drag - Look around
• WASD Keys - Move around
• Click Products - View details
• Scale Slider - Resize products
• Rotation Slider - Rotate products

AR Try-On (Mobile)

• Point Camera - Detect surfaces
• Tap - Place product
• Pinch - Scale product
• Drag - Rotate product
• Move Device - View from different angles

📱 Browser Compatibility

VR Mode

• ✅ Chrome/Edge (Desktop)
• ✅ Firefox (Desktop)
• ✅ Safari (Desktop)
• ✅ VR browsers (Oculus Browser)

AR Mode

• ✅ Chrome Mobile (Android)
• ✅ Safari (iOS 11+)
• ✅ Samsung Internet

🛒 Product Features

Each product includes:

• 3D Visualization - Realistic 3D models
• Detailed Information - Specs and features
• Pricing - Clear pricing display
• Customization - Scale and rotation controls
• Add to Cart - Shopping functionality
• Share - Social sharing capability

💼 Use Cases

• E-commerce Platforms - Enhanced product visualization
• Furniture Stores - Virtual room planning
• Fashion Retailers - Virtual try-on experiences
• Home Decor - Visualize items in your space
• Electronics - Product demonstrations
• Automotive - Virtual showrooms

📊 Business Benefits

• Reduced Returns - See before you buy
• Increased Engagement - Interactive shopping
• Higher Conversion - Better purchase confidence
• Competitive Edge - Modern shopping experience
• Global Reach - Shop from anywhere
• Cost Savings - Reduced physical showroom needs

🎨 Customization

To add your own products:

1. Create 3D models (GLTF/GLB format recommended)
2. Add product data to the productData object
3. Update product display entities in the scene
4. Customize colors and branding in CSS

🔧 Technical Details

VR Scene

• 3D product pedestals
• Interactive product models
• Lighting and shadows
• Camera controls

AR Scene

• Marker-based tracking
• Surface detection
• Product placement
• Real-time rendering

📄 License

MIT License - Feel free to use for commercial projects

👨‍💻 Developer

Created by Hari Kapadia

🤝 Contributing

Contributions, issues, and feature requests are welcome!

⭐ Show Your Support

Give a ⭐️ if this project helped your business!

---

Built with ❤️ for E-commerce using A-Frame, AR.js, and WebXR