[2026/8/13]

[GLB Thumbnail Editor] GLBファイルにサムネイル画像を埋め込むWEBツール

はじめに

「GLB Thumbnail Editor」は、GLB（3Dモデル）ファイルにサムネイル画像を埋め込んだり、3Dビューアーからお好みのアングルを撮影してそのままサムネイルとして追加できるブラウザ完結型のWebアプリケーションです。

3Dモデルファイル（.glb）を配布・管理する際、ファイル内部にサムネイル画像が含まれていると、対応するビューアーやモデル管理ツール（3D Model Explorerなど）で一覧表示した際にプレビュー画像が表示されて大変便利です。

本ツールを使えば、ブラウザ上にGLBファイルをドラッグ＆ドロップするだけで、3Dビューを見ながらアングルを調整して撮影し、サムネイル入りのGLBファイルを作成・ダウンロードできます。

すべての処理はブラウザ内（クライアントサイド）で完結するため、大容量の3Dモデルであっても外部サーバーに送信されることはなく、安全かつ高速に動作します。

対応フォーマット: GLB (.glb) / サムネイル画像: WebP・PNG・JPEG

ブラウザ完結（完全ローカル処理） / Astro / Three.js

GLBファイルにサムネイル画像を埋め込む・3Dビューから撮影して保存できるブラウザ完結Webツール

項目	内容
動作環境	モダンブラウザ（Chrome / Edge / Firefox / Safari）
インストール	不要（Webブラウザで直接動作）
サーバー送信	なし（完全クライアントサイド処理）
料金	無料

GLBファイルをドラッグ＆ドロップすると、左側の3Dビューアーにモデルが即座に描画されます。

マウスドラッグで自由に回転・ズーム・パン操作が可能で、背景モード（ダーク / ライト / チェッカー）の切り替えにも対応しています。

読み込んだGLBファイルの詳細なモデル情報を右ペインに自動表示します。

3Dビューでベストな角度を決めたら、右ペインの「📷 3Dビューから撮影」ボタンを押すだけで現在表示されている画面がサムネイルとして適用されます。サムネイルの保存形式は WebP / PNG / JPEG から選択可能です。

手元にある特定の画像ファイルをドロップしてサムネイルとして指定することもできます。また、既にサムネイルが埋め込まれているGLBファイルの場合は「既存のサムネイルを検出」機能で抽出し、確認・差し替えを行えます。

機能	説明
GLBファイル読み込み	ドラッグ＆ドロップまたは選択によるGLBモデルの高速読み込み
3Dリアルタイム表示	Three.jsによる対話的3D表示（回転・ズーム・背景切り替え）
3Dビュー撮影	3Dビュー表示中のアングルをそのまま撮影してサムネイル化
画像直接埋め込み	手元の画像（WebP/PNG/JPEG）をドロップしてサムネイル指定
サムネイル形式選択	サムネイル画像の保存フォーマット（WebP / PNG / JPEG）を選択
メタデータ解析・表示	頂点数・三角形数・マテリアル・テクスチャ・アニメーションの有無などを自動取得
既存サムネイル検出	GLB内部の既存サムネイル拡張・メタデータを抽出表示
GLB出力・ダウンロード	サムネイル画像を埋め込んだ新しいGLBバイナリを生成・保存

上部のドロップエリア「GLBファイルをドロップ、またはクリックして選択」にGLBファイルを読み込ませます。

保存形式（WebP / PNG / JPEG）を選択することも可能です。

「GLBをダウンロード」ボタンをクリックすると、サムネイルが埋め込まれた新しいGLBファイルがダウンロードされます。

項目	内容
フレームワーク	Astro
3Dレンダリング	Three.js
UI/スタイル	Tailwind CSS / CSS
処理エンジン	Browser Native (Canvas API, FileReader, Blob, URL.createObjectURL)

バージョン	リリース日	内容
v1.0.0	2026/08/13	初版リリース。3Dビュー撮影、画像直接ドロップ、GLBメタデータ表示、WebP/PNG/JPEG対応、GLB再ダウンロード機能