A simple web application for uploading, managing, and viewing 3D models, built with Node.js, Express, and Three.js. This project was bootstrapped and developed with the assistance of Google's Gemini.
- Model Upload: Upload 3D models in
.glbformat. - Customizable List View: Displays models in a responsive card grid. For optimal performance, the view defaults to lightweight thumbnails. Users can switch any model's card to an interactive 3D preview on a case-by-case basis. This preference is saved in the browser, so your layout is preserved when you return.
- Web-based AR: View 3D models in Augmented Reality directly from your browser on compatible iOS and Android devices.
- Interactive 3D Viewer: View models in an interactive WebGL canvas. Rotate, pan, and zoom with mouse controls.
- CRUD Operations: Full Create, Read, Update, and Delete functionality for models.
- Granular Updates: Update the 3D model file, title, and thumbnail image independently.
- Soft Deletes: Models are marked as deleted without being permanently removed from the database.
- Title Search: Quickly find models by searching for their titles.
- Backend: Node.js, Express.js
- Reverse Proxy: Nginx
- Frontend: Bootstrap 5, Bootstrap Icons
- Database: SQLite
- File Uploads: Multer
- 3D Rendering: Three.js,
<model-viewer>
This project runs in a containerized environment using Docker Compose, with an Nginx container acting as a reverse proxy for the Node.js application. This setup provides a consistent and isolated development environment.
-
Clone the repository:
git clone https://github.com/aktnk/3D_model_manager.git cd 3D_model_manager -
Build and start the containers: Run the following command from the project's root directory. This will build the Docker image and start the Nginx and application containers in the background.
docker compose up -d --build
-
Open the application: Navigate to http://localhost:8080.
- Live Reloading: Changes to the source code are immediately reflected in the container.
- Viewing Logs:
docker compose logs -f - Stopping the Application:
docker compose down
If you have trouble viewing a model in AR, please check the following:
- Is your device compatible? Your phone must support ARCore (Android) or ARKit (iOS).
- Is the model file size optimized? For best performance on mobile devices, model files should ideally be under 5MB. Very large models may fail to load in AR.
- (For iOS) Is there a
.usdzfile? While not always required, providing a.usdzversion of your model is the most reliable way to ensure AR works on iPhones and iPads.
The "Astronaut" 3D model used in the screenshots is provided by Poly by Google via modelviewer.dev and is licensed under CC-BY.
This project is licensed under the MIT License. See the LICENSE file for details.
The following third-party libraries are used in this project. They are all licensed under the MIT License.