[WEB Add] VRM Thumbnail Generator - VRMモデルのサムネイル画像を生成

概要

VRM モデルのサムネイル画像をブラウザ上で生成するツール。 アップロード不要 — ファイルはローカルで処理され、サーバーには送信されない。

🔗 ツールを開く: VRM Thumbnail Generator

VRM Thumbnail Generator

PROTOCOL.LAIN // Archive

lain-lab.com

---

使い方

1. VRM を読み込む

3つの方法がある:

• ドラッグ＆ドロップ — .vrm ファイルをプレビューエリアにドロップ
• SELECT FILE — ファイル選択ダイアログから選ぶ
• SAMPLE VRM — 内蔵のサンプルモデルで試す

2. カメラを調整する

スライダー	操作
X	左右に移動
Y	上下に移動
ZOOM	寄り / 引き

3. ライティングを調整する

スライダー	操作
POWER	光の強さ（0〜5）
X	光源の左右位置
Y	光源の上下位置

4. 回転

ROTATION Y スライダーでモデルを回転。-180° 〜 180°。背面や斜めのアングルが撮れる。

5. 背景を設定する

• SELECT IMAGE — WebP / JPG / PNG 画像を背景に設定
• カラーピッカー — 単色背景を選択
• CLEAR — 透過背景に戻す

背景なしの場合、PNG で書き出せば透過画像になる。

6. 表情を変える

EXPRESSION セクションのスライダーで表情を調整（0〜1）:

表情	内容
HAPPY	笑顔
ANGRY	怒り
SAD	悲しみ
RELAXED	リラックス
SURPRISED	驚き
BLINK L	左目を閉じる（ウインク）
BLINK R	右目を閉じる
AA	口を開く（あ）
OH	口をすぼめる（お）

複数の表情を組み合わせて調整できる。RESET EXPRESSION で全てリセット。

7. ポーズを選ぶ

◀ ▶ ボタンで25種のプリセットポーズを切り替え。T ボタンで T-POSE に戻す。

CUSTOM .VRMA — 自作の .vrma アニメーションファイルを読み込んでポーズとして適用できる。

8. 出力設定

アスペクト比プリセット:

ボタン	サイズ	用途
1:1	256 × 256	アイコン・SNSアバター
4:1	480 × 120	バナー画像
16:9	512 × 288	ワイドサムネイル
9:16	288 × 512	スマホ縦長

W / H を手動入力すれば任意のサイズも指定可能（最大 2048px）。

フォーマット:

• WebP — 軽量、透過対応
• PNG — 汎用、透過対応

9. キャプチャ＆ダウンロード

CAPTURE ボタンで撮影。RESULT セクションにプレビューが表示される。 DOWNLOAD ボタンで画像ファイルを保存。

---

技術仕様

項目	内容
レンダリング	Three.js (WebGL)
VRM	@pixiv/three-vrm
アニメーション	@pixiv/three-vrm-animation
フレームワーク	React (Astro Island)
データ処理	全てブラウザ内、サーバー通信なし

---

対応ブラウザ

WebGL 2.0 対応のモダンブラウザ（Chrome / Edge / Firefox / Safari）。 モバイルでも動作するが、PC での使用を推奨。