🌐 AR Studio – Upload, Preview & Deploy AR Models

Upload, Preview & Deploy AR Models with Ease

Features

Drag & Drop Upload - Seamlessly upload 3D models with intuitive file selection
Real-time AR Preview - Instant camera-based AR visualization
Auto Code Generation - Generate complete HTML/JS code for AR deployment
One-Click Export - Copy code or download ready-to-use HTML files
Clean UI/UX - Modern, responsive interface with smooth animations
Model Analytics - File size, format detection, and upload timestamps

Supported Formats

• GLB - Binary glTF (Recommended)
• GLTF - JSON-based 3D format
• OBJ - Wavefront 3D object files
• FBX - Autodesk interchange format

Screenshots

Main Interface

Model Upload & Preview

Generated AR Code

Quick Start

1. Clone the repository

   git clone https://github.com/yourusername/ar-studio.git
   cd ar-studio

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm start
   # or
   yarn start

4. Open your browser

   http://localhost:3000
   

Usage

1. Upload Your 3D Model

• Click "Choose file" or drag & drop your 3D model
• Supported formats: GLB, GLTF, OBJ, FBX
• File size limit: 10MB per model

2. Preview in AR

• Click "Start AR Preview" to launch camera view
• Point your device camera at a flat surface
• Your 3D model will appear in augmented reality

3. Generate & Deploy Code

• AR Studio automatically generates optimized HTML/JS code
• Copy the code or download the complete HTML file
• Deploy anywhere - works on any web server

🛠️ Tech Stack

• Frontend: React.js, HTML5, CSS3
• 3D Graphics: Three.js, WebGL
• AR Framework: AR.js, WebXR
• File Processing: Custom GLB/GLTF parser
• Styling: Modern CSS with animations
• Build Tool: Create React App / Vite

Device Compatibility

Mobile Browsers

• ✅ Chrome for Android (79+)
• ✅ Safari on iOS (13+)
• ✅ Firefox Mobile (68+)
• ✅ Samsung Internet (10+)

Desktop Browsers

• ✅ Chrome (79+)
• ✅ Firefox (68+)
• ✅ Edge (79+)
• ✅ Safari (13+)

🎯 Use Cases

• E-commerce: Product visualization in customer environments
• Education: Interactive 3D learning materials
• Marketing: Immersive brand experiences
• Architecture: Building and interior design previews
• Gaming: AR game prototyping and demos

🤝 Contributing

We welcome contributions!

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🙏 Acknowledgments

• Three.js - 3D graphics library
• AR.js - AR framework
• React - UI library
• WebXR - Web-based AR/VR standards

📊 Stats

Star History

---

Made with ❤️ by Your Name

⭐ Star this repo • 🐛 Report Bug • ✨ Request Feature