3d-asset-manager Svelte Themes

3d Asset Manager

Web-based 3D asset manager built with Svelte, PocketBase, and Three.js. Upload, organize, and preview GLTF/GLB models in real time. Includes user auth, file storage, and live updates. Fully deployable via Vercel and Fly.io. Ideal for creators, devs, and studios.

šŸŽØ 3D Asset Manager

A modern, full-stack web application for uploading, managing, and previewing 3D assets directly in the browser. Built with cutting-edge technologies and designed for scalability and ease of use.

✨ Features

  • šŸ” Secure Authentication - User registration and login system
  • šŸ“¤ Asset Upload & Management - Support for GLTF/GLB 3D models with metadata
  • šŸ–¼ļø Interactive 3D Preview - Real-time 3D model viewing with orbit controls
  • ⚔ Real-Time Updates - Live synchronization across all connected clients
  • šŸ·ļø Smart Organization - Tag-based categorization and search functionality
  • 🌐 Cloud Deployment - Production-ready with automated CI/CD pipeline
  • šŸ“± Responsive Design - Works seamlessly on desktop and mobile devices

šŸ› ļø Tech Stack

Component Technology Purpose
Frontend Svelte + Vite Modern reactive UI framework
Styling Tailwind CSS Utility-first CSS framework
3D Engine Three.js WebGL-based 3D graphics
Backend PocketBase Real-time database & file storage
Deployment Vercel + Fly.io Frontend & backend hosting
CI/CD GitHub Actions Automated testing and deployment

šŸš€ Quick Start

Prerequisites

  • Node.js 18+
  • Git

1. Clone & Install

git clone https://github.com/MarkKatsDesign/3d-asset-manager.git
cd 3d-asset-manager

2. Backend Setup

cd backend
./pocketbase serve

Open http://localhost:8090/_/ and create your admin account.

3. Frontend Setup

cd frontend
npm install
cp .env.example .env
npm run dev

Visit http://localhost:5173 to see your application running!

šŸ“‚ Project Structure

3d-asset-manager/
ā”œā”€ā”€ frontend/                 # Svelte application
│   ā”œā”€ā”€ src/
│   │   ā”œā”€ā”€ lib/
│   │   │   ā”œā”€ā”€ pocketbase.js
│   │   │   └── components/
│   │   └── routes/
│   ā”œā”€ā”€ static/
│   └── package.json
ā”œā”€ā”€ backend/                 # PocketBase backend
│   ā”œā”€ā”€ pocketbase           # PocketBase binary
│   ā”œā”€ā”€ pb_data/             # Database & file storage
│   ā”œā”€ā”€ pb_migrations/       # Database schema
│   └── Dockerfile
└── .github/workflows/       # CI/CD automation

🌐 Deployment

This project is configured for one-click deployment:

  • Frontend: Automatically deploys to Vercel on push to main
  • Backend: Automatically deploys to Fly.io with persistent storage
  • Database: Migrations run automatically on deployment

See SETUP.md for detailed deployment instructions.

šŸŽÆ Use Cases

  • Design Teams - Share and review 3D assets across team members
  • Game Development - Manage game assets and prototypes
  • Architecture - Preview and organize architectural models
  • Education - Create 3D model libraries for courses
  • E-commerce - Product visualization and management

šŸ¤ Contributing

We welcome contributions!

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

šŸ“‹ Roadmap

  • Drag & drop upload interface
  • Automatic thumbnail generation
  • Blender plugin integration
  • Advanced search and filtering
  • Team collaboration features
  • API rate limiting
  • Asset compression optimization

šŸ“„ License

This project is licensed under the MIT License.

šŸ‘Øā€šŸ’» Author

Mark Kats

⭐ Show Your Support

Give a ā­ļø if this project helped you!


Built with ā¤ļø using modern web technologies

Top categories

Loading Svelte Themes