Tom Boullay
152 lines
3.4 KiB
Markdown
152 lines
3.4 KiB
Markdown
# upload-GLTF
|
|
|
|
A secure upload interface for 3D assets with automatic deployment to GitHub via Git LFS. Designers can drag-and-drop models and textures, which are automatically versioned and pushed to a GitHub repository for easy collaboration and asset management. Built with Next.js, Tailwind CSS, and React.
|
|
|
|
## Description
|
|
|
|
This is a Next.js web application that allows designers and developers to upload 3D models and textures via a modern drag-and-drop interface. Uploaded files are automatically committed and pushed to a GitHub repository using Git LFS for efficient version control of large binary files.
|
|
|
|
## Features
|
|
|
|
- **Drag-and-drop upload** for 3D models (.glb, .gltf, .fbx) and textures (.png, .jpg, .jpeg, .webp, .ktx2)
|
|
- **2 GB max** file size per upload
|
|
- **Automatic Git deployment** — files are committed and pushed to GitHub via Git LFS
|
|
- **Secret key authentication** for secure uploads
|
|
- **Modern UI** built with Tailwind CSS and React
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js 18+
|
|
- npm or yarn
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
git clone <repo-url>
|
|
cd upload-GLTF
|
|
npm install
|
|
```
|
|
|
|
## Configuration
|
|
|
|
### Environment Variables
|
|
|
|
Create a `.env.local` file in the root directory:
|
|
|
|
```env
|
|
UPLOAD_SECRET_KEY=your-secret-key-here
|
|
GIT_BRANCH=main
|
|
GIT_REPO_URL=git@github.com:username/repo.git
|
|
```
|
|
|
|
| Variable | Description | Required |
|
|
|----------|-------------|----------|
|
|
| `UPLOAD_SECRET_KEY` | Secret key for authentication | Yes |
|
|
| `GIT_BRANCH` | Git branch to push to (default: main) | No |
|
|
| `GIT_REPO_URL` | Git repository URL for SSH push | No |
|
|
|
|
### Git LFS Setup
|
|
|
|
Install Git LFS and track the asset file types by creating a `.gitattributes` file:
|
|
|
|
```bash
|
|
git lfs install
|
|
```
|
|
|
|
Create `.gitattributes`:
|
|
|
|
```
|
|
*.glb filter=lfs diff=lfs merge=lfs -text
|
|
*.gltf filter=lfs diff=lfs merge=lfs -text
|
|
*.fbx filter=lfs diff=lfs merge=lfs -text
|
|
*.png filter=lfs diff=lfs merge=lfs -text
|
|
*.jpg filter=lfs diff=lfs merge=lfs -text
|
|
*.jpeg filter=lfs diff=lfs merge=lfs -text
|
|
*.webp filter=lfs diff=lfs merge=lfs -text
|
|
*.ktx2 filter=lfs diff=lfs merge=lfs -text
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Development
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Access the app at `http://localhost:3000`
|
|
|
|
### Production
|
|
|
|
```bash
|
|
npm run build
|
|
npm start
|
|
```
|
|
|
|
### Lint
|
|
|
|
```bash
|
|
npm run lint
|
|
```
|
|
|
|
## Docker Deployment
|
|
|
|
### Docker Compose
|
|
|
|
Create `docker-compose.yml`:
|
|
|
|
```yaml
|
|
services:
|
|
app:
|
|
build: .
|
|
ports:
|
|
- "3000:3000"
|
|
environment:
|
|
- UPLOAD_SECRET_KEY=your-secret-key
|
|
- GIT_BRANCH=main
|
|
- GIT_REPO_URL=git@github.com:username/repo.git
|
|
volumes:
|
|
- ./public:/app/public
|
|
- ~/.ssh:/root/.ssh
|
|
```
|
|
|
|
Build and run:
|
|
|
|
```bash
|
|
docker-compose up --build
|
|
```
|
|
|
|
### Coolify
|
|
|
|
The Dockerfile is optimized for Coolify deployment. Configure environment variables through the Coolify interface.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
.
|
|
├── app/
|
|
│ ├── api/upload/route.ts # Upload API + git push
|
|
│ ├── globals.css
|
|
│ ├── layout.tsx
|
|
│ └── page.tsx
|
|
├── components/
|
|
│ └── UploadZone.tsx # Upload component
|
|
├── public/
|
|
│ ├── models/ # Uploaded 3D models
|
|
│ └── textures/ # Uploaded textures
|
|
├── Dockerfile
|
|
├── package.json
|
|
├── tailwind.config.ts
|
|
└── tsconfig.json
|
|
```
|
|
|
|
## Supported File Formats
|
|
|
|
| Type | Extensions |
|
|
|------|------------|
|
|
| 3D Models | .glb, .gltf, .fbx |
|
|
| Textures | .png, .jpg, .jpeg, .webp, .ktx2 |
|
|
|
|
## License
|
|
|
|
MIT |