update: remove docker
This commit is contained in:
Tom Boullay
@@ -1,23 +1,14 @@
|
||||
# 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.
|
||||
A secure web interface for uploading 3D assets (GLTF/GLB + textures) and automatically pushing them to a GitHub repository via the GitHub API. Built for La Fabrik Durable.
|
||||
|
||||
## Description
|
||||
## Stack
|
||||
|
||||
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
|
||||
- **Next.js 16** (App Router) + React 19 + TypeScript
|
||||
- **Three.js** (@react-three/fiber + @react-three/drei) for 3D preview
|
||||
- **Tailwind CSS** for styling
|
||||
- **Octokit** for pushing via the GitHub API
|
||||
- **Vercel** for hosting
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -29,42 +20,23 @@ npm install
|
||||
|
||||
## Configuration
|
||||
|
||||
### Environment Variables
|
||||
|
||||
Create a `.env.local` file in the root directory:
|
||||
Copy `.env.example` to `.env.local` and fill in the values:
|
||||
|
||||
```env
|
||||
UPLOAD_SECRET_KEY=your-secret-key-here
|
||||
GITHUB_TOKEN=ghp_your-github-personal-access-token
|
||||
GIT_BRANCH=main
|
||||
GIT_REPO_URL=git@github.com:username/repo.git
|
||||
GIT_REPO_URL=https://github.com/your-org/your-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 |
|
||||
| `UPLOAD_SECRET_KEY` | Secret key for upload authentication | Yes |
|
||||
| `GITHUB_TOKEN` | GitHub Personal Access Token (scope `repo`) | Yes |
|
||||
| `GIT_BRANCH` | Target branch (default: main) | No |
|
||||
| `GIT_REPO_URL` | Target GitHub repository URL | Yes |
|
||||
|
||||
### 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
|
||||
```
|
||||
> To create a token: GitHub > Settings > Developer settings > Personal access tokens > Generate new token (classic) with the `repo` scope.
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -76,77 +48,41 @@ npm run dev
|
||||
|
||||
Access the app at `http://localhost:3000`
|
||||
|
||||
### Production
|
||||
### Production (Vercel)
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npm start
|
||||
```
|
||||
Deploy to Vercel and configure environment variables in the dashboard.
|
||||
|
||||
### Lint
|
||||
## How it works
|
||||
|
||||
```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.
|
||||
1. The user enters their access key
|
||||
2. They select a folder containing:
|
||||
- `model.glb` or `model.gltf` (required)
|
||||
- Textures: `roughness`, `normal`, `metalness`, `color`, `displace` (`.png/.jpg/.webp`, optional)
|
||||
3. The model is displayed in a 3D preview
|
||||
4. On clicking "Upload & Push to GitHub", each file is sent to the `/api/upload` endpoint
|
||||
5. The API validates the file and pushes it directly to the GitHub repo via the API (no git CLI needed)
|
||||
|
||||
## 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
|
||||
app/
|
||||
├── api/upload/route.ts # API: validation + GitHub push via Octokit
|
||||
├── globals.css # Tailwind + Google Fonts
|
||||
├── layout.tsx # Root layout
|
||||
└── page.tsx # Home page
|
||||
components/
|
||||
├── UploadZone.tsx # UI: key input, folder picker, validation, upload
|
||||
├── ModelViewer.tsx # Lazy wrapper for the 3D viewer
|
||||
└── SceneViewer.tsx # Three.js Canvas
|
||||
```
|
||||
|
||||
## Supported File Formats
|
||||
## Supported Formats
|
||||
|
||||
| Type | Extensions |
|
||||
|------|------------|
|
||||
| 3D Models | .glb, .gltf, .fbx |
|
||||
| Textures | .png, .jpg, .jpeg, .webp, .ktx2 |
|
||||
| 3D Models | `.glb`, `.gltf` |
|
||||
| Textures | `.png`, `.jpg`, `.jpeg`, `.webp` |
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
MIT
|
||||
|
||||
Reference in New Issue
Block a user