[2026/6/10]

[Astro #74] RPG完成。ラスボス暗黒魔法エフェクトとネオングローダメージポップアップの実装

[Astro #74] RPG完成。ラスボス暗黒魔法エフェクトとネオングローダメージポップアップの実装

はじめに

本日、EDとラスボスのエフェクトを作成した事で、一気にエンディングまで繋がり、ゲームが完成しました。
ただ、まだバグがあると思うので、見つけ次第修正と、VRはまだ未確認なので明日以降チェックしていく予定です。

モチベーションが落ちてたので未完のまま終わるかと思いましたが、最後まで完成させることが出来て良かったです。

以下の記事では、Three.js、React Three Fiber（R3F）、およびWebGLを用いた3D ADV/RPGバトルシステムの演出強化、およびインフラの最適化・バグ修正を実施しました。実装した技術的仕様および修正内容を解説します。

新しい魔法とエフェクトを追加：

EDING:

1. キャラクター紹介ブロックにおける自転角度の初期化修正

1.1 現象と演出上の不具合

3D ADV/RPGのエンディングシーケンスにおける「キャラクター紹介（CharacterIntroBlock）」は、データ駆動によって外部JSON（Avatars.json）から呼び出されたVRMアバターをタイムラインに沿って一定時間ごとに切り替え、グリッド上で一定速度で自転再生（YY軸回転）させるアーカイブ演出です。

元の実装では、アバターが次のキャラクターへと切り替わった瞬間、新しく描画されたアバターが正面（角度0）を向いておらず、直前のキャラクターが消滅した瞬間の回転角度（例えば180度裏を向いた状態や、斜めを向いた状態）をそのまま引き継いで描画されていました。これにより、キャラクターが切り替わるたびに初期ポーズの向きが不規則になり、アーカイブ・図鑑としての視覚的な統一感と洗練さを損なう演出上の不具合が生じていました。

1.2 コードレベルでの原因分析

この不具合の原因は、Three.jsおよびReact Three Fiber（R3F）のフレームループ（useFrame）内における、時間管理用参照値（useRef）の生存周期とリセット漏れにあります。

以下は修正前の useFrame 内の主要な処理構造です。

// 修正前のロジック（概念）
useFrame((_, delta) => {
  // 毎フレーム、回転角を累積加算
  rotationY.current += ROTATION_SPEED * delta;

  if (avatarGroupRef.current) {
    avatarGroupRef.current.rotation.y = rotationY.current;
  }

  // タイマーの累積
  switchTimer.current += delta;
  if (switchTimer.current >= DISPLAY_DURATION) {
    switchTimer.current = 0; // タイマーはリセットされるが回転角は残る

    if (avatarIndex === AVATARS.length - 1) {
      onPhaseComplete();
    } else {
      setAvatarIndex((prev) => prev + 1); // ➔ useStateによる再レンダリングが発生
    }
  }
});

R3Fの useFrame は毎秒60回以上の頻度でデルタ時間（前フレームからの経過時間）を蓄積します。角度の制御には、Reactの再レンダリングによるオーバーヘッドを避けるため、変化しても再描画をトリガーしない useRef（rotationY）が使用されています。

一定時間（DISPLAY_DURATION = 5.0）が経過すると、switchTimer.current が 0 にリセットされ、setAvatarIndex によってインデックスが更新されます。これによりコンポーネントの再レンダリングが走り、新しいアバターコンポーネントがマウントされます。

しかし、useRef で管理されている rotationY.current はコンポーネントが破棄されない限りメモリ空間上で値を保持し続ける性質があるため、タイマーが 0 に戻っても、回転角度の値だけは過去のフレームから累積された大きな数値（数ラジアン以上の累積値）のまま残ってしまっていました。その結果、新アバターの rotation.y にその蓄積値がそのまま適用され、初期の向きがズレる現象が発生していました。

1.3 修正内容と実装コード

対策として、タイマーが閾値（DISPLAY_DURATION）を超えてキャラクターの切り替えが確定した判定ブロックの内部に、累積回転角度を物理的に更地に戻す処理（rotationY.current = 0;）をインジェクションしました。

以下が修正後の該当箇所の実装コードです。

  useFrame((_, delta) => {
    if (camera.parent) {
      camera.parent.position.set(0, 0, 0);
      camera.parent.rotation.set(0, 0, 0);
    }
    camera.position.set(0, 1.2, 3.2);
    camera.lookAt(0, 1.1, 0);

    // 1. 回転角の更新（毎フレーム加算）
    rotationY.current += ROTATION_SPEED * delta;

    if (avatarGroupRef.current) {
      avatarGroupRef.current.position.set(AVATAR_X, AVATAR_Y, 0);
      avatarGroupRef.current.rotation.y = rotationY.current;
    }

    // 2. タイマー監視と切り替え処理
    switchTimer.current += delta;
    if (switchTimer.current >= DISPLAY_DURATION) {
      switchTimer.current = 0; // タイマーリセット
      rotationY.current = 0;   // 👈【追加】回転角度をジャスト正面（0）に完全初期化！

      if (avatarIndex === AVATARS.length - 1) {
        onPhaseComplete();
      } else {
        setAvatarIndex((prev) => prev + 1);
      }
    }
  });

1.4 導入後の効果と水平展開

このリセット処理のインジェクションにより、インデックスの更新と完全に同期して回転角が真のゼロラジアン（オイラー角における基本正面方向）へと差し替わるインフラが確立されました。データ駆動によってJSONから順次ロードされるすべてのVRMアバターが、画面に登場した瞬間に必ずジャスト正面を向いた綺麗な状態から一斉に自転を開始するようになり、カクつきや表示直後の方向のバラつきが物理的に消滅しました。

さらに、このメモリクリアの設計思想は、隣接するコンポーネントである建造物ミニチュアの紹介パート（StageIntroBlock）における .glb モデルの回転制御にも同様に水平展開され、システム全体における回転アセットの生存周期管理の堅牢性を高める結果となりました。

2. ピュアThree.js物理駆動による「暗黒魔法エフェクト」の開発

2.1 開発の背景と世界観の同期

ラスボス（BOSS_AKUMA）の専用暗黒魔法「終焉のプロトコル（TERMINAL_ERR）」の実装にあたり、一般的な画像テクスチャやパーティクルアセットを用いた表現では、本作のストイックなサイバーパンクの世界観（Wired）に対して浮いてしまい、表現の解像度を下げてしまう懸念がありました。また、ポリゴンサイズが過剰に大きいと、幾何学的なワイヤーフレームの線が目立ちすぎて機械的な印象を与えてしまいます。

そこで、外部アセットに一切依存せず、純粋なThree.jsのジオメトリと高精度なフレームレート連動型の数理物理演算のみで構成されたクラス（EnemyDarkMagic.ts）をスクラッチで開発しました。これにより、小さく凝縮された青白い光が鋭いテンポで締め付ける、冷徹な「システムバグ」としての密度と演出強度を持ったエフェクトを物質化しました。

2.2 人魂の構造と公転収束ロジック

エフェクトの核となる「人魂（炎の球）」は、プレイヤーアバター（VRMモデル）の空間座標を基準として展開されます。当初、実験用環境とVRM等身モデルとの間で高さのミスマッチが発生し、軌道が足元（腰付近）に偏る問題がありましたが、最終的にイレイナの胸元・首元の絶対ラインにジャストマウントされるオフセット値（Y=2.0Y = 2.0）を割り出し、完全な空間適合を行いました。

中心となるプレイヤー座標（高さ2.0m）の周囲に対し、初期位相角を90度ずつ正確にオフセットさせた4体の人魂オブジェクト（THREE.Group）を動的にインスタンス化します。

人魂単体の質感は、有機的な怪しさを出すために2種類のワイヤーフレームメッシュによる二重構造で形成されています。

// 🔮 1. 怪しくゆらめくコンパクトな人魂メッシュの生成構造
private createSoulFlameMesh(): THREE.Group {
  const soulGroup = new THREE.Group();

  // 🔵 コア：内側の眩しい水色の球
  const coreMat = new THREE.MeshBasicMaterial({ color: 0x99ffff, wireframe: true });
  const coreMesh = new THREE.Mesh(new THREE.SphereGeometry(0.06, 8, 8), coreMat);
  soulGroup.add(coreMesh);

  // 🌀 アウター：外側を包むディープブルーの炎の層
  const outerMat = new THREE.MeshBasicMaterial({ color: 0x0055ff, wireframe: true, transparent: true, opacity: 0.8 });
  const outerMesh = new THREE.Mesh(new THREE.SphereGeometry(0.12, 12, 12), outerMat);
  soulGroup.add(outerMesh);

  return soulGroup;
}

内側の芯に高輝度な水色の球（半径0.06）を置き、外側に不透明度0.8の青い球（半径0.12）を重ねることで、ワイヤーフレームが三次元的に交差し、画像テクスチャを使用せずともオカルトチックに明滅してゆらめくエネルギー球の質感をシミュレートしています。

2.3 タイムラインとゆらめき演算（火の粉粒子ループ）

暗黒魔法全体のタイムラインは、useFrame のデルタ時間を蓄積するステートマシンによって秒単位で厳密に制御されています。

  1. CASTING フェーズ（1.0秒間）: ボスの胸元（高さ0.8m）で予兆球体が scale.setScalar により4倍まで膨張し、AdditiveBlending（加算合成）による発光を伴って回転します。このとき、効果音レジストリ（SoundEffects.json）に新たに追加した詠唱音 SE_BOSS_MAGIC_CHARGE（重力魔法1）が再生されます。
  2. SOUL_CHASE フェーズ（2.8秒間）: 予兆球体の消滅と同時に、プレイヤーの周囲半径 1.0（START_RADIUS）の四方に4体の人魂が展開し、公転ループ音 SE_BOSS_MAGIC_CAST（重力魔法2）の鳴り響く中で高速な締め付けを開始します。
// ── 【PHASE 2: SOUL_CHASE（高速公転・締め付け収束）】 ──
const progress = Math.min(this.stateTimer / this.TIME_SOUL_CHASE, 1.0);
const currentRadius = this.START_RADIUS * (1.0 - progress); // 等速で半径を縮小
const currentOpacity = Math.max(0, 1.0 - progress);        // 進捗に合わせて透明化

this.souls.forEach(s => {
  // タイムラインと同期した高速公転角度計算（秒間12ラジアン）
  const runningAngle = s.baseAngle + (this.SOUL_ROTATION_SPEED * this.stateTimer);

  s.mesh.position.set(
    playerPos.x + Math.cos(runningAngle) * currentRadius,
    playerPos.y + (Math.sin(this.stateTimer * 5) * 0.1), // 縦方向の浮遊ゆらぎ
    playerPos.z + Math.sin(runningAngle) * currentRadius
  );

  s.mesh.children.forEach(child => {
    (child as THREE.Mesh).material.opacity = currentOpacity;
  });

  // 炎の軌跡（火の粉粒子）をドロップ
  if (Math.random() > 0.1) {
    this.spawnSoulTrail(s.mesh.position);
  }
});

進捗率（progress）の進行に合わせて人魂の半径（currentRadius）を 1.0 から 0 に向けて等速収束させると同時に、マテリアルの不透明度（opacity）を減衰させます。これにより、「プレイヤーを包み込むようにキュルキュルと高速回転しながら急激に収束し、激突の直前でフッと消える」極めて手触りの良い物理挙動を実現しています。

さらに、人魂の通過した座標から、上空（YY軸正方向）へ向けてランダムなノイズドリフトを伴いながら上昇・消滅する火の粉粒子配列（soulParticles）を自律的に湧き出させることで、有機的な炎のトレイルエフェクトを完成させました。

収束半径が 0.05（HIT_RADIUS）に達した瞬間、即座に着弾ヒット音 SE_BOSS_MAGIC_HIT（毒魔法1）が炸裂し、親のバトルエンジンへ正確にダメージ数を通知（onDamage）してクレンジング（cleanup）が走る、完璧なシーケンスリレーを構築しています。

2.4 モーションのループ暴走対策とクランプ制御

敵アバターが特殊攻撃（魔法詠唱・発射モーション）に遷移した際、そのアニメーションクリップがデフォルトのループ設定のままになっていたため、魔法の着弾・バースト処理が終わった後も敵が同じ攻撃ポーズを何度も繰り返し再生（3回以上ループ）してしまうバグが発生していました。

これを解決するため、R3Fのアニメーションシステムにおける設定を「単発再生（ワンショット）」へと書き換える防衛処理を実装しました。

// アニメーションミキサーにおけるワンショット再生とクランプの設定
const action = mixer.clipAction(clip);

if (ONE_SHOT_ANIMS.includes(animId)) {
  action.setLoop(THREE.LoopOnce, 1); // 再生回数を1回に制限
  action.clampWhenFinished = true;   // アニメーション終了時のフレームでポーズを固定
} else {
  action.setLoop(THREE.LoopRepeat, Infinity);
}
action.play();

action.setLoop(THREE.LoopOnce, 1) を明示的にインジェクションすることで、クリップの再生が終点に達した瞬間にループを強制遮断します。

さらに、再生終了後にアバターの姿勢がパッと初期ポーズ（Tポーズや標準立ちポーズ）に強制リセットされて画面が激しくカクつくのを防ぐため、action.clampWhenFinished = true を有効化しました。これにより、詠唱を終えた「手をかざしきったポーズ」の最終フレームで姿勢が綺麗にホールド（クランプ）され、バトルのタイムラインと完全に同期して滑らかに通常の待機ポーズ（IDLE）へと移行する堅牢なモーション制御を実現しました。

3. 3Dキャンバステクスチャを用いたグロー型ダメージポップアップへの刷新

3.1 60FPS動作のためのCPU負荷低減

従来のポップアップシステムでは、エフェクトの生存時間（経過時間）をReactの useState（setAge）で管理し、毎フレーム更新を行っていました。

しかし、React Three Fiber（R3F）のフレームループ（useFrame）内において毎秒60回以上 useState をキックする設計は、Reactコンポーネントツリーの頻繁な再レンダリング（Reconciliation）を引き起こし、致命的なパフォーマンス低下を招きます。特にバトルの多段ヒット時など、画面内に複数のポップアップが同時に生成された場合、CPUの処理オーバーヘッドによってフレームドロップ（処理落ち）が発生する危険性がありました。

この問題を解決するため、経過時間の蓄積機構から useState を完全に排除し、変更通知を伴わない useRef（ageRef）による高速時間管理へと移行しました。

// 🚀 【最適化】：再レンダリングを発生させない最軽量の時間蓄積インフラ
const ageRef = useRef(0);
const DURATION = 1.2; // 生存秒数

useFrame((state, delta) => {
  if (!meshRef.current || !materialRef.current) return;

  // 1. 時間の蓄積（デルタ時間の純粋加算）
  ageRef.current += delta;
  const age = ageRef.current;

  if (age >= DURATION) {
    onComplete(); // 生存期間を超過した瞬間に安全に消去
    return;
  }

  // 2. 上昇物理演算（等速直線運動）
  meshRef.current.position.y += delta * 0.5;

  // （以下、描画・フェード制御）
});

経過時間の蓄積を ageRef.current += delta; という純粋なプリミティブ値の加算のみで行うことで、テキストの上昇運動やフェードアウトの最中に React 側の再描画処理は一切走りません。すべての演算が Three.js のネイティブレイヤーのみで完結するため、CPU負荷をほぼゼロに抑え、バトル空間内での 60FPS の安定動作を担保しました。

3.2 動的キャンバス描画と発光（グロー）インジェクション

標準の3Dテキスト（フォントをポリゴン化する手法）では、サイバーテイストな演出の鍵となる「ネオングロー（発光効果）」をピクセルパーフェクトに表現することが困難でした。そこで、メモリ空間上に動的に HTML5 Canvas を生成し、それをマテリアルのテクスチャとして結合する CanvasTexture 駆動型インフラへと刷新しました。

マウント時に1度だけ実行される useMemo フックの内部で、512x128 ピクセルのCanvas上にダメージ数値を精密にレンダリングします。

// 🎨 【3Dキャンバステクスチャインフラ】
const texture = useMemo(() => {
  const canvas = document.createElement('canvas');
  canvas.width = 512;
  canvas.height = 128;
  const ctx = canvas.getContext('2d');
  if (!ctx) return new THREE.Texture();

  ctx.fillStyle = 'rgba(0,0,0,0)'; // 背景完全透過
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // サイバーパンクスタイルのフォント定義（高解像度化に伴い 80px へ引き上げ）
  ctx.font = 'bold 80px monospace';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // 🌟 ネオングロー（発光効果）のインジェクション
  ctx.shadowColor = glowColor; // 外側の発光色（デフォルトは鮮烈な赤紫 #ff2266）
  ctx.shadowBlur = 26;        // ぼかし幅を 26 まで拡大し、強い輝度感を表現
  ctx.fillStyle = '#ffffff';   // 文字の中心（芯）を純白にすることで輝度を強調

  const displayText = `${prefix}${damage}`;
  ctx.fillText(displayText, canvas.width / 2, canvas.height / 2);

  const tex = new THREE.CanvasTexture(canvas);
  tex.colorSpace = THREE.SRGBColorSpace;
  return tex;
}, [damage, glowColor, prefix]);

Canvas のネイティブな影描画機能（ctx.shadowBlur = 26）を利用し、文字の芯を「純白（#ffffff）」、外輪を「鮮烈な赤紫（#ff2266）」の二重調色に設定してレンダリングしています。これを WebGL マテリアルに流し込むことで、暗黒魔法の実験時と同様に、暗い戦闘空間の中で文字自体がネオンサインのように鮮烈に発光して見える独自の視覚的効果（グロー効果）を獲得しました。フォントサイズも領域の黄金比に合わせて 80px に引き上げています。

3.3 描画バッファの競合および貫通バグの封殺

三人称視点（TPS）を採用する 3D バトル空間において、従来のシステムではダメージポップアップの発生座標がハイポリゴンな敵モデルの内部にめり込んだり、背景の岩壁やステージオブジェクトの陰に隠れてしまい、文字が一部削れたり完全に消失（クリッピング）したりする3Dバッファ競合バグが多発していました。

UIテキストの視認性を100%保証するため、ポップアップを構成する planeGeometry のマテリアルに depthTest={false} および depthWrite={false} をインジェクションしました。

return (
  <mesh ref={meshRef} position={position}>
    {/* 文字比率 4:1 に完全適合させたPlaneジオメトリ */}
    <planeGeometry args={[1.2, 0.3]} />

    {/* 🛡️ 防衛レイヤー：深度テスト・深度バッファ書き込みの完全無効化 */}
    <meshBasicMaterial
      ref={materialRef}
      map={texture}
      transparent={true}
      opacity={1.0}
      depthTest={false}  // 🎯 敵モデルの肉体内や地形にめり込んで文字が破綻するのを完全封殺
      depthWrite={false} // 🎯 描画バッファの競合によるチカつきを完全に防ぎます
    />
  </mesh>
);

この防衛策により、GPUのレンダリングパイプラインにおいて深度バッファ（Zバッファ）による前後関係のテストが完全にスキップされます。結果として、テキストオブジェクトはあらゆる3Dアセット（敵アバター、エフェクト、地形）の遮蔽計算を無視し、常に画面の一番手前（最前面）に1ピクセルの欠けもなく完全描画される堅牢なインフラが構築されました。

3.4 高精度ビルボードハック

元のコードでは、テキストの回転制御（ビルボード化）を行う際、lookAt={new THREE.Vector3(2.0, 2.5, 5.5)} のように、あらかじめ固定された特定の空間座標の方向を向かせる大雑把な実装になっていました。この状態では、プレイヤーがカメラを動かしたり、TPSの視点移動やVR空間での首の傾き（HMDの向き）が発生した瞬間に、テキストが斜めに歪んでしまい、可読性が著しく低下していました。

これを完全に解決するため、useFrame が毎フレーム提供するR3Fのグローバルステートから、レンダリングカメラの現在地（state.camera.position）をリアルタイムに抽出し、直接ロックオンする高精度ビルボードハックを実装しました。

useFrame((state, delta) => {
  if (!meshRef.current || !materialRef.current) return;

  // （時間管理・上昇演算処理）

  // 🎯 常にレンダリングカメラの現在地を追従し続ける高精度ビルボード
  // lookAtに固定値を渡すのではなく、カメラオブジェクトのリアルタイムな絶対座標を直撃させます。
  meshRef.current.lookAt(state.camera.position);

  // 4. スムーズな後半フェードアウト（0.8秒ホールド、残りの0.4秒で消滅）
  if (ageRef.current > 0.8) {
    const fadeProgress = (ageRef.current - 0.8) / (DURATION - 0.8);
    materialRef.current.opacity = Math.max(0, 1.0 - fadeProgress);
  }
});

このフレーム毎の動的追従により、カメラがどれほど激しく移動・回転しようとも、またVR空間でプレイヤーが視線をどこへ傾けようとも、ダメージ数字は常にカメラの投影平面に対して完全に直交（真向かいに正対）した状態を維持します。

さらに、0.8秒間高い輝度をホールドした後に残りの0.4秒で滑らかに闇に消え去る不透明度（opacity）の減衰ロジックとも綺麗に噛み合い、視覚的な心地よさと「冷徹なシステム数値」としての圧倒的な読みやすさを両立させることに成功しました。

4. 撃破シーケンスからエンディングへのカメラ固定リレー実装

4.1 2Dレイヤーの競合と三人称カメラのワープバグ封殺

ラスボス撃破というゲームクリアの節目において、戦闘終了直後にシステムテキスト（最期のセリフやエラーログ）を挿入する演出を実装する際、当初は @react-three/drei の <Html> 要素を用いた Web2D 方式を試みました。しかし、実機検証において2つの深刻な技術的描写不具合が発生しました。

  1. 三人称カメラの計算暴走による配置バグ： 戦闘終了（handleBattleEnd）と同時に、ゲームのステートは探索モード（EXPLORE）に復帰します。この際、三人称視点（TPS）を制御する <ADVController> が、プレイヤーアバターの後方へ急激にカメラ座標を回り込ませるマウント行列計算を開始します。2Dの Html 要素はこのカメラ行列の急激な変化に追従できず、カメラの基準座標の真後ろ（プレイヤーの背中側）に取り残される形で配置され、プレイヤーの視界から完全に消失（不可視化）する現象が起きました。
  2. ポインタイベント吸い込みによる進行不能ロック： Html 要素が生成するブラウザ上の DOM レイヤーが Canvas 自体の最前面に展開されるため、画面全体のクリック判定をその見えない DOM 枠がすべて吸い込んでしまう現象が発生しました。これにより、React Three Fiber（R3F）側へのイベント伝播が完全に遮断され、決定キーや画面クリックによるセリフ送りが一切受け付けられなくなり、ゲームが進行不能になる重大なバグを誘発していました。

これらの干渉を根本から排除するため、中途半端な DOM レイヤーの混入を完全に廃止しました。そして、すでに作中で可読性と動作実績が証明されている、純粋な3D空間固定型のメッセージインフラ（ADVMessageBox ＋ CameraHUD）への完全一本化を断行しました。

4.2 特設正面ロック空間（一本釣りルート）の構築

通常の探索モード（GameState = 'EXPLORE'）の共通描画パイプライン内にクリアメッセージを埋め込む設計では、背後にある巨大なステージglbモデルの描画、NPCアバター、移動用の接近センサー、コントローラーの入力制御などがすべて裏で動き続けてしまいます。これらは操作ロックの漏れやステージワープ判定の誤爆など、予期せぬステートの衝突を招く原因となります。

そこで、storyStep === 4（ラスボスまたはテスト敵撃破完了フラグ）かつ isDialogueActive の条件下において、通常のマップ描画やアバター制御の return ブロックを完全にバイパス（遮断）し、専用の独立した3D空間を単独で返却する「一本釣りルート」の特設コンポーネント構造へとアーキテクチャを書き換えました。

// 📄 src/components/PROJECT_LAIN/ADV/ADVManager.tsx
// 🎯 通常の探索描画パイプラインの手前で実行される、撃破後専用の独立レンダリングブロック

if (storyStep === 4 && isDialogueActive) {
  return (
    <group>
      <ambientLight intensity={0.8} />
      <color attach="background" args={['#000206']} />

      {/* 📸 カメラの位置と角度をフレーム単位で正面に固定するロッカー */}
      <PostBossCameraLocker />

      {/* 🛡️ 実績のある 3D 立体メッセージインフラをダイレクト駆動 */}
      <CameraHUD distance={1.1} offset={[0, 0]}>
        <ADVMessageBox
          speaker={dialogueList[dialogueIndex]?.speaker || "SYSTEM"}
          text={dialogueList[dialogueIndex]?.text || ""}
        />
      </CameraHUD>
    </group>
  );
}

この特設空間の内部には、三人称カメラの暴走移動を物理的に強制停止させるための軽量な監視コンポーネント <PostBossCameraLocker /> を配備しました。

// 📄 src/components/PROJECT_LAIN/ADV/ADVManager.tsx
// 📸 三人称カメラの座標計算を物理的に上書きシャットダウンするヘルパー

const PostBossCameraLocker: React.FC = () => {
  const { camera } = useThree();
  useFrame(() => {
    if (camera.parent) {
      camera.parent.position.set(0, 0, 0);
      camera.parent.rotation.set(0, 0, 0);
    }
    // エンディングシーンの基準カメラ座標と完全に一致させる
    camera.position.set(0, 1.2, 3.2);
    camera.lookAt(0, 1.1, 0);
  });
  return null;
};

useFrame ループを利用し、カメラの親グループの座標を [0, 0, 0] に、カメラ自身の絶対座標を [0, 1.2, 3.2] に、視線を [0, 1.1, 0] に毎フレーム強制上書き（ロック）します。これにより、カメラがプレイヤーの背後に回り込む物理計算そのものを完全にシャットダウンすることに成功しました。

4.3 シームレス・リレー（エンディングへの接続）

この正面ロックインフラの構築により、戦闘終了のフェードアウトが明けた瞬間、画面上には不要なステージモデルやコントローラーなどのアセットが一切描画されず、完全な漆黒の電子空間（Wired）が展開されます。

画角はエンディングシーン（ADVEndingScene）の開幕アングルと全く同じ正面俯瞰でミリ単位で固定され、カメラの直前（距離1.1m）にマウントされた CameraHUD を通じて、エメラルドグリッドの枠線を持つ高解像度な3D立体メッセージボックス（ADVMessageBox）が100%確実に正面中央へマウント表示されます。

// 📄 src/components/PROJECT_LAIN/ADV/ADVManager.tsx
// 📝 handleAdvanceDialogue 内におけるエンディング接続リレーロジック

if (next >= dialogueList.length) {
  isDialogueActiveRef.current = false;
  setIsDialogueActive(false);

  // 🎯 🌟【ED直結トリガー】
  // 全てのエラーログを読み終えた瞬間に、同一カメラ画角を維持したまま、1フレームの暗転も挟まずEDをキック
  if (storyStep === 4) {
    setIsEndingActive(true);
    setDialogueIndex(0);
    return;
  }
  // （通常戦闘時の処理へ）
}

プレイヤーがキーボードや画面タップ、またはVRトリガーでシステムテキストを読み進め、会話配列のインデックスが終端に達した瞬間、handleAdvanceDialogue 内の条件分岐が作動します。

storyStep === 4 を検知したシステムは、別シーンの再ロードや不要な暗転フェードを一切挟むことなく、現在の正面固定カメラの内部行列を完全に維持した状態のまま、描画コンポーネントを <ADVEndingScene> へと瞬時に切り替えます。

このシームレスなバトンリレーにより、テキストウィンドウがフッと消え去った静寂の直後、全く同じカメラワークのまま、Denis Pavlov氏のエンディングBGM『Friends Forever』のイントロと共に、全NPCアバターが次々と正面を向いて自転を開始する極めて完成度の高い大団円シーケンスへの接続を確立しました。