🕶️ 3D Glasses Viewer

An interactive 3D glasses viewer built with Three.js featuring customizable Ray-Ban models. Experience realistic 3D rendering with real-time color customization and smooth controls.

✨ Features

• 🎨 Real-time Color Customization - Change frame, lens, and bridge colors instantly
• 🖱️ Interactive Controls - Smooth mouse and touch controls for 360° viewing
• 📱 Responsive Design - Works perfectly on desktop, tablet, and mobile devices
• ⚡ High Performance - Optimized rendering with WebGL and modern Three.js features
• 🎯 Auto-rotation - Optional automatic model rotation with adjustable speed
• 🌙 Modern UI - Clean, dark theme with gradient accents and smooth animations
• ♿ Accessibility - Screen reader support and keyboard navigation
• 🔧 Developer Friendly - Well-documented code with modern ES6+ features

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• Modern web browser with WebGL support

Installation

1. Clone the repository

   git clone https://github.com/yourusername/3d-glasses-viewer.git
   cd 3d-glasses-viewer

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 to view the application

Build for Production

# Build the project
npm run build

# Preview the production build
npm run preview

🎮 Controls

Action	Description
Mouse Drag	Rotate the 3D model
Mouse Wheel	Zoom in/out
GUI Panel	Customize colors and settings
Auto Rotate	Toggle automatic rotation

🛠️ Development

Project Structure

3d-glasses-viewer/
├── src/
│   ├── 3dGlass.js      # Main Three.js application
│   ├── index.html      # HTML structure
│   └── style.css       # Modern CSS styling
├── static/
│   ├── draco/          # Draco compression files
│   └── models/         # 3D model assets
├── package.json        # Dependencies and scripts
├── vite.config.js      # Vite configuration
└── README.md          # This file

Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint
npm run format   # Format code with Prettier

Key Technologies

• Three.js - 3D graphics library
• Vite - Fast build tool and dev server
• lil-gui - Lightweight GUI controls
• DRACO - 3D geometry compression
• WebGL - Hardware-accelerated graphics

🎨 Customization

Adding New Models

1. Place your .gltf or .glb file in static/models/
2. Update the modelPath in src/3dGlass.js
3. Adjust material indices if needed

Styling

The application uses CSS custom properties for easy theming:

:root {
  --primary-color: #2563eb;
  --background-color: #0f172a;
  --surface-color: #1e293b;
  /* ... more variables */
}

Performance Optimization

• Pixel Ratio: Automatically capped at 2x for performance
• Shadow Maps: Enabled with soft shadows
• Tone Mapping: ACES Filmic for realistic lighting
• Lazy Loading: Models load asynchronously with progress indicators

📱 Browser Support

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+
• ✅ Mobile browsers with WebGL support

🤝 Contributing

We welcome contributions! Please follow these steps:

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

Development Guidelines

• Use modern ES6+ JavaScript features
• Follow the existing code style
• Add comments for complex logic
• Test on multiple browsers
• Ensure responsive design

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Three.js community for the amazing 3D library
• Ray-Ban for the inspiration (this is a fan project)
• Vite team for the excellent build tool
• lil-gui for the lightweight controls

📞 Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Contact the maintainer

🔮 Future Features

• Multiple glasses models
• AR/VR support
• Export functionality
• Advanced lighting controls
• Material presets
• Social sharing

---

Made with ❤️ by Dev Amir

Experience the future of 3D web applications