A full-stack web application built with the MERN (MongoDB, Express, React, Node.js) stack to upload, manage, and display 3D models (GLB/GLTF format). It utilizes Cloudinary for cloud-based file storage and React Three Fiber for interactive 3D rendering in the browser.
- Upload 3D models (.glb, .gltf formats).
- Store model files efficiently on Cloudinary.
- Manage model metadata (name, URLs) in MongoDB.
- Display interactive 3D models using React Three Fiber.
- Play embedded model animations.
- Toggle helper grid visibility.
- Toggle animations.
- Delete models (from database and Cloudinary).
- Frontend:
- React
- React Three Fiber (
@react-three/fiber) - Zustand (State Management)
- Axios (HTTP Requests)
- Backend:
- Node.js
- Express
- MongoDB
- Multer (File Upload Handling)
- Database: MongoDB
- File Storage: Cloudinary
Prerequisites:
- Node.js (v14.x or higher recommended)
- MongoDB instance (local or cloud like MongoDB Atlas)
- Cloudinary Account (get Cloud Name, API Key, API Secret)
Steps:
-
Clone the repository:
git clone https://github.com/Zadfar/model-viewer.git cd model-viewer -
Backend Setup:
- Navigate to the backend directory:
cd backend - Install dependencies:
npm install
- Create a
.envfile in thebackenddirectory. Copy the following variables and replace the placeholder values with your actual credentials:(Ensure your MongoDB connection string is correct for your local or cloud instance.)# backend/.env PORT=5001 # Or your preferred backend port MONGODB_URI=your_mongodb_connection_string CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret
- Navigate to the backend directory:
-
Frontend Setup:
- Navigate to the frontend directory:
cd frontend - Install dependencies:
npm install
- Navigate to the frontend directory:
-
Start the Backend Server:
- Open a terminal in the
backenddirectory. - Run:
npm run dev
- The backend should start, typically on
http://localhost:5001.
- Open a terminal in the
-
Start the Frontend Development Server:
- Open another terminal in the
frontenddirectory. - Run:
npm run dev
- The frontend React app should start, typically on
http://localhost:3000.
- Open another terminal in the
GET /api/models: Fetch metadata for all models.GET /api/models/:id: Fetch metadata for a specific model by its MongoDB ID.POST /api/models/upload: Upload a new model file (modelFile) and its name (name). Expectsmultipart/form-data.DELETE /api/models/:id: Delete a specific model by its MongoDB ID.