操作
機能 #408
完了
機能 #408:
three-vrm アバター Web アプリ（VRM1.0 描画 MVP）
説明
背景¶
#406 決定記録に基づき、VRM 1.0 アバターを three-vrm（@pixiv/three-vrm, three.js）で描画する Web アプリを実装する。
作業内容¶
-
obs/avatar/（beatoraja の HTTP サーバから配信）に JS/TS アプリを配置。 - 指定された VRM1.0 ファイルをロードし、MToon マテリアル込みで描画。
- 待機（idle）アニメーション、機嫌(mood)→VRM 標準表情（joy/sorrow/angry/relaxed/ surprised ）マッピング。
- 連携フィード（
/pet/state.json・/pet/eventsSSE）を購読して反映。 -
pet_commentを吹き出し表示（将来 TTS/口パク拡張余地を残す）。 - 背景透過（OBS/オーバーレイ合成前提）。
完了条件¶
- ブラウザで VRM が表示され、state/events に応じて表情・吹き出しが変化する。
依存¶
「アバター連携フィード基盤」子チケット（契約一致）。VRM1.0 への変換済みアセット。
追記¶
テスト用VRM1.0ファイル: rusk_vrm1.vrm
エージェント ちゃん さんが12日前に更新
- ステータス を 未着手 から 実装中 に変更
- 進捗率 を 0 から 10 に変更
実装に着手しました。
- ブランチ:
feature/408 - 対応方針:
obs/avatar/に three-vrm（ベンダー同梱・ビルド無し）の Web アバターアプリを実装。/pet/state.json・/pet/events(SSE) を購読し、mood→VRM標準表情（joy/sorrow/angry/relaxed、surprised不使用）・各イベント→リアクション/吹き出し・背景透過を実現。検証は Playwright のブラウザ自動テスト。
エージェント ちゃん さんが12日前に更新
- ステータス を 実装中 から 完了 に変更
- 進捗率 を 10 から 100 に変更
対応が完了しました。
概要¶
#406 決定記録に基づき、#407 のペットフィード（/pet/state.json・/pet/events SSE）を消費する three-vrm アバター Web アプリを obs/avatar/ に新規実装。ObsHttpServer 経由で http://localhost:7322/avatar/index.html 表示、ビルド工程なし・オフライン動作。
変更点¶
- three.js + three-vrm で VRM1.0 を描画（MToon対応、
alpha + clearColor 0で背景完全透過、まばたき＋呼吸 idleアニメ、spring bone/lookAt）。VRM未配置でも落とさず SSE・吹き出しは継続動作。 - 起動時に
/pet/state.json取得 →/pet/events(SSE) 購読。mood(0–100)→VRM標準表情（<25 angry / 25–44 sad / 45–69 neutral / 70–84 relaxed / 85–100 happy、surprised不使用）。result/level_up/pet_comment/session_summary/practice_recommendを一時リアクション＋吹き出しに反映。 - 吹き出しは
speak(text, ms)単一APIに分離（将来TTS/口パク余地）。既存OBSオーバーレイのデザイン言語に統一、webfontリンク無しでオフライン維持。 - 依存は vendor 同梱:
obs/avatar/vendor/three-vrm-bundle.js（three 0.160.1 + @pixiv/three-vrm 3.1.6 を esbuild で単一ESM）。*.vrmは gitignore 維持（アセット非コミット）。 - 変更ファイル:
obs/avatar/配下の新規18ファイル（アプリ source・Playwrightテスト・vendorバンドル）。既存ファイルの変更なし（Java側はObsHttpServerが/avatar/**を自動配信するため追加実装不要）。
テスト¶
-
.\gradlew.bat test: Java の変更が無いため対象外（実行せず）。 - Playwright ブラウザ自動テスト（chromium）: 全テスト green（透過背景 / mood→表情 / pet_comment吹き出し / result反応）。VRMアセット非配置でも通過。
関連 MR¶
- !85 (feature/408 → develop)
操作