3D Tools
Integrated 3D model processing toolkit — batch processing, comparison, and thumbnail generation for GLB/GLTF files.
Live: 3d-thumbnail-generator.vercel.app
Features
GLB Batch Processing (Main)
Bulk-process GLB files with configurable optimization options:
- Animation removal/reduction — strip or reduce keyframes with configurable algorithms
- Draco compression — apply Draco mesh compression for smaller file sizes
- Mesh joining — merge meshes sharing the same material to reduce draw calls
- Mesh simplification — reduce polygon count with adjustable ratio
- Decimation — reduce keyframes, nodes, and meshes
- Center origin — align model origins automatically
- Draco-compressed GLB support — read and write Draco-compressed models natively
- GLTF validation — validate files against the glTF spec with detailed error/warning reports
- Batch download — process multiple files and download as ZIP
GLB Compare
Side-by-side comparison of two GLB models:
- Interactive 3D viewers with orbit controls
- Geometry stats (triangles, vertices, meshes, materials, textures)
- Animation comparison (count, duration, tracks, keyframes)
- Synchronized playback between models
- Draco-compressed model support
3D Thumbnail Creation
Generate PNG thumbnails from 3D models:
- Adjustable camera angle, zoom, and offset
- Background customization (solid color or gradient)
- Batch processing with queue management
- Per-thumbnail camera adjustment and regeneration
Tech Stack
| Category | Technology |
|---|
| Framework | Next.js 15 (App Router) |
| 3D Rendering | Three.js |
| GLB Processing | gltf-transform |
| Compression | Draco (draco3dgltf) |
| Validation | gltf-validator |
| Image Processing | Sharp |
| Deployment | Vercel |
Getting Started
Prerequisites
Installation
git clone https://github.com/YOUR_USER/3d-thumbnail-generator.git
cd 3d-thumbnail-generator
npm install
Development
npm run dev
Open http://localhost:3000.
Other Commands
| Command | Description |
|---|
npm run build | Production build |
npm run start | Start production server |
npm run cli | CLI mode |
npm run batch | Batch processing via CLI |
Deployment
Deployed on Vercel. Push to main to trigger automatic deployment.
日本語ガイド
GLB/GLTFファイル向けの統合3Dモデル処理ツールキット — バッチ処理、比較、サムネイル生成。
公開URL: 3d-thumbnail-generator.vercel.app
機能
GLBバッチ処理（メイン）
GLBファイルを一括処理し、各種最適化オプションを適用できます:
- アニメーション削除/削減 — キーフレームの除去・削減（アルゴリズム選択可）
- Draco圧縮 — Dracoメッシュ圧縮でファイルサイズを削減
- メッシュ結合 — 同一マテリアルのメッシュを結合してドローコールを削減
- メッシュ簡略化 — ポリゴン数を任意の比率で削減
- デシメーション — キーフレーム・ノード・メッシュを削減
- 原点中央化 — モデルの原点を自動で揃える
- Draco圧縮GLB対応 — Draco圧縮済みモデルの読み書きにネイティブ対応
- GLTFバリデーション — glTF仕様に基づき検証し、エラー/警告を詳細にレポート
- 一括ダウンロード — 複数ファイルを処理してZIPで一括ダウンロード
GLB比較
2つのGLBモデルを並べて比較:
- オービット操作可能なインタラクティブ3Dビューア
- ジオメトリ統計（三角形数、頂点数、メッシュ数、マテリアル数、テクスチャ数）
- アニメーション比較（数、長さ、トラック数、キーフレーム数）
- モデル間の同期再生
- Draco圧縮モデルにも対応
3Dサムネイル生成
3DモデルからPNGサムネイルを生成:
- カメラ角度・ズーム・オフセットの調整
- 背景のカスタマイズ（単色／グラデーション）
- キュー管理付きのバッチ処理
- サムネイル単位でのカメラ調整・再生成
技術スタック
| カテゴリ | 技術 |
|---|
| フレームワーク | Next.js 15 (App Router) |
| 3Dレンダリング | Three.js |
| GLB処理 | gltf-transform |
| 圧縮 | Draco (draco3dgltf) |
| バリデーション | gltf-validator |
| 画像処理 | Sharp |
| デプロイ | Vercel |
はじめに
前提条件
インストール
git clone https://github.com/YOUR_USER/3d-thumbnail-generator.git
cd 3d-thumbnail-generator
npm install
開発
npm run dev
http://localhost:3000 を開いてください。
その他のコマンド
| コマンド | 説明 |
|---|
npm run build | プロダクションビルド |
npm run start | プロダクションサーバー起動 |
npm run cli | CLIモード |
npm run batch | CLIによるバッチ処理 |
デプロイ
Vercel にデプロイされています。main ブランチへのプッシュで自動デプロイされます。
License
MIT
