![[Astro #61] Three.js ぷよぷよ風パズルゲームの実装とReact key地獄](https://assets.lain-lab.com/images/uploads/astro-61-r3f-puzzle-game-noise-block-bug.webp)
[Astro #61] Three.js ぷよぷよ風パズルゲームの実装とReact key地獄
React + Three.jsでぷよぷよ風パズルゲームを実装。お邪魔ブロック（ノイズ）追加後に発生した描画バグの原因を徹底調査。key props、ジオメトリ再利用、グリッドデータのデバッグ手法まで。
ARCHIVE_INDEX / PAGE_6
TOTAL_ITEMS: 700
![[Astro #60] R3FによるSTGエンディングプロトコルの構築 〜パーティクル収束・クレジットスクロール・接続切断演出の全実装〜](https://assets.lain-lab.com/images/uploads/astro-60-r3f-stg-ending-credit-protocol.webp)
[Astro #60] R3FによるSTGエンディングプロトコルの構築 〜パーティクル収束・クレジットスクロール・接続切断演出の全実装〜
React Three Fiberを用いてSTGのエンディング演出を1から設計・実装した記録。800個のパーティクルが中心へ収束し続けるループアニメーション、R3F上のクレジットスクロール、接続切断（発散）演出、感謝テキストのフェードイン/アウトまで、フェーズ管理と頂点カラー制御を組み合わせたプロトコルの全記録。
![[Astro #59] WebXRにおける入力同期プロトコルのクレンジング 〜量子爆発ボムの実装と多重トランスフォーム競合の完全遮断〜](https://assets.lain-lab.com/images/uploads/astro-59-webxr-input-synchronization-cleansing-bomb-protocol.webp)
[Astro #59] WebXRにおける入力同期プロトコルのクレンジング 〜量子爆発ボムの実装と多重トランスフォーム競合の完全遮断〜
React Three FiberとWebXRを用いた3Dシューティングゲームにおいて、上流のScene、Manager、下流のController間で発生したフラグ競合を解消し、アバター追従型のミニマルHUDと3回制限ボムを完全同期させたリファクタリングの記録。
![[Astro #58] IndexedDBを活用した外部VRMモデルの永続キャッシュと無限クローゼット化の構築](https://assets.lain-lab.com/images/uploads/astro-58-indexeddb-vrm-persistent-cache-closet.webp)
[Astro #58] IndexedDBを活用した外部VRMモデルの永続キャッシュと無限クローゼット化の構築
一時的なBlob URLの死活問題を解決するため、外部からロードしたVRMのバイナリをIndexedDBに直接トラップ。静的なJSONリストとDB内の動的レコードをシームレスに結合し、外部アセットを無限に追加・呼び出し可能にするパイプラインハッキングの記録です。
![[Astro #57] 3D数式弾幕の本格移植とチャージ短縮アイテム実装における論理演算子の罠](https://assets.lain-lab.com/images/uploads/astro-57-3d-danmaku-charge-shorten-bugfix.webp)
[Astro #57] 3D数式弾幕の本格移植とチャージ短縮アイテム実装における論理演算子の罠
Three.js/R3Fを用いたSTG開発において、サンプル環境から本番環境への3D数式弾幕の移植手順を解説。また、新アイテム「CHARGE_SHORTEN」実装時に発生した、エフェクトと内部タイマーの同期不全、およびSTGController側の論理演算子の優先順位に起因するデバッグの盲点について詳述。
![[Astro #56] データ駆動型シューティングへの進化 〜アイテムシステム・ライフ制・AIがもたらした殺意のステージ〜](https://assets.lain-lab.com/images/uploads/astro-56-webxr-stg-data-driven-evolution.webp)
[Astro #56] データ駆動型シューティングへの進化 〜アイテムシステム・ライフ制・AIがもたらした殺意のステージ〜
WebXR対応の3Dシューティングゲームに、アイテムシステム、ライフゲージ、動的ステージ遷移を実装。AI（Claude）が作成した鬼畜難易度のタイムラインJSONを、電脳シールドと魔方陣チャージショットのパターン攻略でねじ伏せるゲームデザインの進化を解説します。
![[Astro #55] WebXR対応フルダイブSTGの実装：VRコントローラーとJSONタイムライン管理](https://assets.lain-lab.com/images/uploads/astro-55-webxr-stg-implementation.webp?)
[Astro #55] WebXR対応フルダイブSTGの実装：VRコントローラーとJSONタイムライン管理
WebXRでの3Dゲーム開発実践。JSONベースのステージ進行管理や、VRコントローラーのアナログスティック入力、モード移行時のボーン（関節）リセット処理など、フルダイブSTG構築の技術的詳細を解説します。
![[Astro #54] LAYER_STG_PROTOCOL —— R3Fによる3Dゲームループの構築](https://assets.lain-lab.com/images/uploads/astro-54-r3f-stg-object-pool-collision-timeline.webp)
[Astro #54] LAYER_STG_PROTOCOL —— R3Fによる3Dゲームループの構築
React Three FiberとThree.jsを用い、ブラウザネイティブで動作する軽量かつ堅牢な3D奥スクロールシューティング（STG）の構築プロセスを記録。ガベージコレクションを完全に防止するアセット一括解決型のオブジェクトプール設計、計算負荷を極限まで下げる平方根排除の距離和（dx*dx + dy*dy）衝突判定、スペースハリアー風の無敵ワイヤーフレームピラー、斜め対空軌道で降り注ぐ破壊可能なローポリ電脳隕石（メテオ）システムの追加と難易度リバランス。さらに、既存モデルを8倍にスケール合成した巨大ボスインベーダー戦のフェーズ遷移、e.repeatおよび破損フラグによるキーボード・チャタリング（オーバーヒート時のバタつき）の完全ブロックなど、商業アーケードゲームの文法をCopland OSのUIレイヤーへ美しく統合したアーキテクチャを網羅。
![[Astro #53] React Three Fiberで魔女のVRMを箒に乗せて自動周回・浮遊アニメーションを実装](https://assets.lain-lab.com/images/uploads/astro-53-vrm-broom-flight-orbit-animation.webp)
[Astro #53] React Three Fiberで魔女のVRMを箒に乗せて自動周回・浮遊アニメーションを実装
React Three Fiberを用いて、VRMアバターを箒に乗せてサイバー空間を自動周回させる浮遊アニメーションの実装記録。三角関数による楕円軌道の計算や、Math.atan2を活用した進行方向への自動旋回ロジックまで、3D空間における数学的アプローチをまとめました。
![[Astro #52] VRMアバターの魔法詠唱・収束エフェクトと音声キャッシュプロトコルの実装](https://assets.lain-lab.com/images/uploads/astro-52-vrm-magic-cast-and-effect-system.webp)
[Astro #52] VRMアバターの魔法詠唱・収束エフェクトと音声キャッシュプロトコルの実装
Webブラウザ上で動作するVRMアバターに、アニメのような魔法詠唱・放出システムを実装。Three.jsの基本機能で作るダイナミックな集中線エフェクトと、ミリ秒単位の多重再生を支えるIndexedDB音声キャッシュプロトコルを構築しました。
![[Astro #51] VRMアバターの武装具現化と発砲シークエンスの完全同期](https://assets.lain-lab.com/images/uploads/astro-51-vrm-weapon-shooting-sequence.webp)
[Astro #51] VRMアバターの武装具現化と発砲シークエンスの完全同期
React Three Fiberを用いたVRMアバターへのアクセサリ着脱と、setTimeoutによる泥臭い発砲アニメーション同期、マズルフラッシュの座標調整など、XR空間での実存感を高めるための実装プロセスを解説します。
![[Astro #50] VRMアバターの自律インタラクションと空間UI（WiredSpeechBubble）の実装](https://assets.lain-lab.com/images/uploads/astro-50-vrm-interaction-webgl-ui.webp)
[Astro #50] VRMアバターの自律インタラクションと空間UI（WiredSpeechBubble）の実装
PROTOCOL.LAINの空間に溶け込む自律型VRMアバターのUI実装。HTML要素に頼らずDreiのEdgesを用いてThree.js空間へ直接吹き出しを描画する手法や、アニメーションステートの罠（Tポーズ問題）の解決策をまとめた技術アーカイブ。