[2026/7/15]

[Astro #102] VRM Thumbnail Generator v2 — 表情・背景・ライティング・25ポーズ対応

[Astro #102] VRM Thumbnail Generator v2 — 表情・背景・ライティング・25ポーズ対応

前回のおさらい

[Astro #101] で VRM Thumbnail Generator を単品ツールとして切り出した。VRM を読み込んで、カメラ調整 → ポーズ選択 → キャプチャ → ダウンロードという基本フローを実装した。

今回はそこから一気に機能追加して v2 にした。

ツール:

[Astro #102] VRM Thumbnail Generator v2 — 表情・背景・ライティング・25ポーズ対応

追加した機能

表情スライダー（EXPRESSION）

VRM の expressionManager を使って表情を調整できるようにした。スライダーで 0〜1 の値を設定する。

対応する9種の表情:

  • HAPPY / ANGRY / SAD / RELAXED / SURPRISED
  • BLINK L / BLINK R（片目ウインク）
  • AA / OH（口の形）

実装は expressionManager.setValue(key, value) を呼ぶだけ。VRM の API が綺麗に設計されているので、キー名さえ分かれば一発で動く。

const updateExpression = useCallback((key: string, value: number) => {
  const vrm = vrmRef.current;
  if (!vrm?.expressionManager) return;
  vrm.expressionManager.setValue(key, value);
  vrm.expressionManager.update();
  setExpressions(prev => ({ ...prev, [key]: value }));
}, []);

背景画像 / カラーピッカー（BACKGROUND）

2つの背景設定方法を用意した。

画像ファイル: WebP / JPG / PNG を選択すると THREE.TextureLoader で読み込んで scene.background にセット。キャプチャにもそのまま反映される。

カラーピッカー: <input type="color"> でOSネイティブのカラーパレットから単色背景を設定。

CLEAR ボタンで透過背景に戻る。

ライティング調整（LIGHTING）

DirectionalLight の強度（POWER）と位置（X / Y）をスライダーで調整可能にした。dirLightRef で参照を保持して直接操作する。

ポーズ 5個 → 25個（◀▶ ナビ）

3D ROOM アプリで作成した25個のポーズファイル（.vrma）を全て使えるようにした。

ボタン5個並べる方式から ◀ ▶ ナビゲーションに変更。ループ対応（25 → 1、1 → 25）。T ボタンで T-POSE にリセット。

const POSE_COUNT = 25;
const POSE_PATH = '/assets/pose';

上部の定数を変えるだけで将来のポーズ追加にも対応。

出力サイズ W × H 独立

正方形固定（256×256）だった出力を、幅と高さを独立して指定できるように変更。撮影用カメラのアスペクト比も thumbWidth / thumbHeight で自動計算。

アスペクト比プリセット

ワンボタンで W/H を切り替え:

プリセットサイズ用途
1:1256 × 256アイコン・サムネイル
4:1480 × 120WIRED ROOM ポータルバナー
16:9512 × 288ワイドスクリーン
9:16288 × 512スマホ縦長

サンプル VRM

VRM ファイルを持っていなくてもすぐ試せるように、SAMPLE VRM ボタンを追加。サーバー上のデフォルト VRM を fetch して読み込む。

バグ修正

THREE.Clock 非推奨警告

THREE.Clock が deprecated になっていたので、performance.now() による直接計算に置き換え。

// Before
const clock = new THREE.Clock();
const delta = clock.getDelta();

// After
let lastTime = performance.now();
const now = performance.now();
const delta = (now - lastTime) / 1000;
lastTime = now;

VRMLookAtQuaternionProxy 警告

ポーズ適用時に出る VRM アニメーションライブラリの警告。console.warn を一時的にフィルタリングして抑制。

CSS shorthand/longhand 混在警告

React で border（shorthand）と borderColor（longhand）を同じ要素に指定していた。border に統一して解消。

変更規模

VrmThumb.tsx 1ファイル、864行 → 約980行。追加は約120行程度。ゲーム開発に比べると圧倒的に軽い。

現在の機能一覧

  • VRM ドラッグ&ドロップ / ファイル選択 / サンプル VRM
  • カメラ調整（X / Y / ZOOM）
  • ライティング調整（POWER / X / Y）
  • VRM 回転
  • 背景画像 / カラーピッカー / 透過
  • 表情スライダー（9種）
  • ポーズ選択（25種 + カスタム .vrma + T-POSE）
  • 出力サイズ W × H 独立指定
  • アスペクト比プリセット（1:1 / 4:1 / 16:9 / 9:16）
  • WebP / PNG フォーマット選択
  • キャプチャ → ダウンロード