I've created a 3D model uploader application with Firebase integration as requested. Here's what the application includes:

Main Features:

1. Upload Functionality

   • Upload multiple 3D models (GLB files) to Firebase Storage
   • Upload multiple 2D images to Firebase Storage
   • Progress tracking during uploads

2. 3D Model Viewer

   • Canvas that takes up 80% of the screen width
   • Real-time preview of uploaded 3D models
   • Preview of uploaded images

3. Toolbar Controls

   • Position controls (X, Y, Z)
   • Rotation controls (X, Y, Z)
   • Scale controls (X, Y, Z)
   • Reset functionality for each transformation type

4. AR Viewer

   • "Publish" button to view the model in AR
   • Dedicated AR viewer page using the model-viewer web component
   • Support for AR on compatible devices

How to Use:

1. Upload 3D models (GLB files) or images using the upload buttons
2. Select a file from the uploaded files list to preview it
3. Use the toolbar to adjust position, rotation, and scale of 3D models
4. Click "Publish to AR View" to open the model in the AR viewer

The application is responsive and works on both mobile and desktop devices. The Firebase configuration you provided is integrated into the application for storing and retrieving the uploaded files.

Technical Implementation:

1. Firebase Integration

   • Uses the Firebase Storage SDK to handle file uploads
   • Generates unique IDs for each uploaded file
   • Stores file metadata and download URLs

2. 3D Rendering

   • Uses React Three Fiber (Three.js) for the 3D canvas
   • Implements OrbitControls for interactive model viewing
   • Includes environment lighting and grid for better visualization

3. AR Capabilities

   • Leverages the model-viewer web component for AR functionality
   • Supports various AR modes (webxr, scene-viewer, quick-look)
   • Works on compatible devices with AR support

4. UI/UX

   • Responsive layout that adapts to different screen sizes
   • Intuitive controls with visual feedback
   • File management system with preview capabilities

Project Structure:

• app/page.tsx - Main entry point
• components/model-uploader.tsx - Core upload and management functionality
• components/toolbar.tsx - Controls for manipulating 3D models
• components/model-viewer.tsx - 3D canvas implementation
• app/view/page.tsx - AR viewer page
• lib/firebase.ts - Firebase configuration and initialization

To extend this application further, you could add features like:

• User authentication
• Saving and loading model transformations
• Multiple scene management
• Texture and material editing
• Collaboration features

Let me know if you'd like any clarification or have questions about the implementation!

Setting Up the 3D Model Uploader in Next.js

Here's a complete guide to set up and run the 3D model uploader application in Next.js.

Package.json

First, here's the package.json file with all the necessary dependencies:

File Structure

Here's the complete file structure for the application:

Setup Steps

1. Create a New Next.js Project (if you haven't already)

When prompted, select:

• Yes for TypeScript
• Yes for ESLint
• Yes for Tailwind CSS
• No for src/ directory (or yes if you prefer)
• Yes for App Router
• No for custom import alias (or yes if you prefer)

2. Install Dependencies

Replace the contents of your package.json with the one provided above, then run:

3. Set Up shadcn/ui Components

Install the shadcn CLI:

When prompted, select:

• Style: Default
• Base color: Slate (or your preference)
• Global CSS: app/globals.css
• CSS variables: Yes
• React Server Components: Yes
• Components directory: @/components
• Utility directory: @/lib/utils
• Import alias: @/*

Then install the required components:

4. Create Required Files

Create all the files according to the file structure above. Copy the code from the previous response for each file.

5. Add a Basic Layout and Global CSS

Create or update app/layout.tsx:

Make sure your app/globals.css includes the Tailwind directives and shadcn/ui variables:

6. Create a Placeholder SVG

Create a simple placeholder SVG in public/placeholder.svg:

7. Configure Next.js

Create or update next.config.js:

8. Run the Application

Visit http://localhost:3000 to see your application running.

Important Notes

1. Firebase Configuration: Make sure the Firebase configuration in lib/firebase.ts matches your Firebase project. The one provided is from your example.
2. Model Viewer Web Component: The AR functionality uses the model-viewer web component which is loaded dynamically. It requires a modern browser and may not work in all environments.
3. CORS Configuration: You might need to configure CORS in your Firebase Storage to allow access to your models from different domains. In the Firebase console, go to Storage > Rules and update them to allow proper access.
4. File Types: The application is configured to accept GLB files for 3D models and common image formats (JPG, PNG, WEBP) for images. You can modify the accepted file types in the model-uploader.tsx file.
5. Environment Variables: For production, consider moving your Firebase configuration to environment variables for better security.

Troubleshooting

1. Firebase Errors: If you encounter Firebase initialization errors, make sure your Firebase project is properly set up with Storage enabled.
2. 3D Model Loading Issues: If models don't load, check the browser console for CORS errors or file format issues.
3. AR Not Working: AR functionality requires a compatible device and browser. Test on a modern mobile device with AR capabilities.
4. Styling Issues: If the UI doesn't look right, make sure all shadcn/ui components are properly installed and your globals.css has the correct variables.

Let me know if you encounter any specific issues during setup!