VRMプレビューの表示位置の修正。

進捗を更新。

Author: logue

PLAN.md

@@ -391,13 +391,43 @@ SLは身長200cm基準（VRM標準は170cm）のため倍率調整が必須。
 
 今すぐ実装すべき順序：
 
-1. VRM読込
-2. 身長スケール設定
-3. ボーンマッピング確認
-4. 顔制御設定（簡潔版）
-5. 指確認
-6. 3Dプレビュー
-7. エクスポート
+- [x] VRM読込
+- [x] 身長スケール設定
+- [x] ボーンマッピング確認
+- [x] 顔制御設定（簡潔版）
+- [x] 指確認
+- [x] 3Dプレビュー（three.js、バックエンド生成GLB表示）
+- [x] エクスポート（.gdb出力）
+
+### 🧾 実装済み（2026-02-26時点）
+
+- [x] Rustバックエンドの解析/変換コマンド（Tauri IPC・CLI）
+- [x] VRM拡張ベースのHumanoidボーン抽出（VRMC_vrm / VRMフォールバック）
+- [x] 必須ボーン不足・階層不整合・頂点数・テクスチャ警告のバリデーション表示
+- [x] テクスチャ自動縮小ポリシー（1024/2048）と出力後サイズレポート
+- [x] プロジェクト設定の保存/読込
+- [x] 2カラムUI（左:操作 / 右:プレビュー）とログ表示DOM
+
+### 📌 残件（マイルストーン別）
+
+#### v0.9（コア変換の完成）
+
+- [ ] Aポーズ→Tポーズ補正の本実装（上腕回転補正＋頂点逆補正）
+- [ ] inverseBindMatrices再生成の本実装
+- [ ] ウェイト再分配・joints最適化の本実装
+- [ ] ボーン階層の再構成（SL向け最終階層を明示的に構築）
+- [ ] Bento拡張ボーン（目・口・まぶた・指）の実運用レベル対応
+- [ ] Blender再読込～SLアップロードの最終検証フロー完了
+
+#### v1.0（次バージョン）
+
+- [ ] 尾・耳・羽の動作対応
+- [ ] プレビューの追加操作（グリッド/ライト/ワイヤーフレーム切替）
+- [ ] アニメーション自動取得・形式変換・再生テスト機能
+
+#### v1.1（その次のバージョン）
+
+- [ ] ヘッド抽出モード
 
 ---
 

frontend/src/components/VrmPreview.vue

@@ -33,7 +33,7 @@ const updateRendererSize = () => {
   const width = canvasHost.value.clientWidth;
   const height = Math.min(Math.max(canvasHost.value.clientHeight, 280), 420);
 
-  renderer.setSize(width, height, false);
+  renderer.setSize(width, height, true);
   camera.aspect = width / height;
   camera.updateProjectionMatrix();
 };
@@ -66,18 +66,25 @@ const fitCameraToModel = (root: THREE.Object3D) => {
     return;
   }
 
+  root.updateMatrixWorld(true);
   const box = new THREE.Box3().setFromObject(root);
+  if (box.isEmpty()) {
+    return;
+  }
+
   const size = box.getSize(new THREE.Vector3());
   const center = box.getCenter(new THREE.Vector3());
   const maxSize = Math.max(size.x, size.y, size.z, 0.1);
 
-  camera.position.x = center.x;
+  camera.position.set(center.x, center.y + maxSize * 0.4, center.z + maxSize * 1.8);
   camera.near = Math.max(maxSize / 200, 0.01);
   camera.far = Math.max(maxSize * 200, 1000);
   camera.updateProjectionMatrix();
+  camera.lookAt(center);
 
-  controls.target.x = center.x;
+  controls.target.copy(center);
   controls.update();
+  controls.saveState();
 };
 
 const loadPreviewModel = async (path: string, options: ConvertOptions) => {
@@ -163,6 +170,9 @@ onMounted(() => {
   controls.enableDamping = true;
   controls.minDistance = 0.2;
   controls.maxDistance = 50;
+  controls.target.set(0, 0, 0);
+  camera.lookAt(controls.target);
+  controls.update();
 
   const ambient = new THREE.HemisphereLight(0xffffff, 0x444444, 0.9);
   scene.add(ambient);