![[JavaScript] 3D ROOM制作 3日目 ポータル通路・Export・VRMフィギュア配置 (Three.js)](https://assets.lain-lab.com/images/uploads/javascript-threejs-room-04-portal-corridor-export-figurine.webp)
[JavaScript] 3D ROOM制作 3日目 ポータル通路・Export・VRMフィギュア配置 (Three.js)
vanilla JS + Three.js + WebXRで構築する3Dウォークスルー空間WIRED ROOMの開発記録。iframe競合バグ修正、VRMフィギュア配置、公開用ZIPエクスポート、プロシージャル通路生成、ポータルによる部屋間移動機能を実装。
ARCHIVE_INDEX / PAGE_2
TOTAL_ITEMS: 700
![[JavaScript] 3D ROOM制作 2日目（午後） VR対応・エディタ・ROOM追加機能 (Three.js)](https://assets.lain-lab.com/images/uploads/javascript-threejs-room-03-vr-editor-custom-room.webp)
[JavaScript] 3D ROOM制作 2日目（午後） VR対応・エディタ・ROOM追加機能 (Three.js)
vanilla Three.jsのROOMアプリにWebXR VRモード、右クリックメニュー、カスタムROOMアップロード（IndexedDB保存・stats自動取得・info入力フォーム）、リアルタイム調整スライダー、サムネ撮影機能を追加した記録
![[JavaScript] 3D ROOM制作 2日目（前） 初期設定ウィザードとスカイボックス実装 (Three.js)](https://assets.lain-lab.com/images/uploads/javascript-threejs-room-02-setup-wizard-skybox-dexie.webp?)
[JavaScript] 3D ROOM制作 2日目（前） 初期設定ウィザードとスカイボックス実装 (Three.js)
Three.js製ROOMアプリのPhase 2。セットアップウィザードUI、models.jsonからのサムネイルグリッド表示、VRMアップロードとIndexedDB保存、プロシージャルスカイボックス4プリセット（Night/Sunset/Day/WIRED）をvanilla JSで実装した記録
![[JavaScript] フォルダ置くだけで動く3D ROOM機能を作る（Three.js）](https://assets.lain-lab.com/images/uploads/javascript-threejs-room-glb-vrm-walkable-3d-space.webp?)
[JavaScript] フォルダ置くだけで動く3D ROOM機能を作る（Three.js）
Three.js + vanilla JSで、ZIPを解凍してサーバーに置くだけで動く3D ROOM機能を構築。GLB部屋モデル、VRMアバター、BVH衝突判定、3人称カメラ、ポータルリンクまで、バンドラー不要のピュアESM構成で実装した記録
![[Astro #101] VRM Thumbnail Generator 単品ツール化](https://assets.lain-lab.com/images/uploads/astro-101-vrm-thumbnail-generator.webp)
[Astro #101] VRM Thumbnail Generator 単品ツール化
VRMサムネ自動生成機能を単品WEBアプリとして独立。リアルタイム3Dプレビュー、カメラ調整、.vrmaポーズ適用、ドラッグ&ドロップ対応のツールを1日で実装。
![[Astro #100] VRMサムネイル自動生成 & メニュー表示](https://assets.lain-lab.com/images/uploads/astro-100-vrm-thumbnail-auto-gen.webp)
[Astro #100] VRMサムネイル自動生成 & メニュー表示
Three.jsのオフスクリーンレンダリングでVRMモデルのサムネイルを自動生成し、IndexedDBにBase64で保存。WiredAvatarMenuとWiredVRMenuの両方でサムネ付きモデル選択UIを実装した記録。
![[Astro #99] LAYER FIGHTER: ラウンドフロー改善・膝蹴り暴発バグ修正](https://assets.lain-lab.com/images/uploads/astro-99-ftg-round-flow-kick-bug.webp)
[Astro #99] LAYER FIGHTER: ラウンドフロー改善・膝蹴り暴発バグ修正
WebXR格闘ゲーム LAYER FIGHTER のラウンドフローを再設計し、GAME_SETフェーズを新設。2本先取時の演出整理、フレームカウントリセット、リセットロジック共通化、入力バッファ起因の膝蹴り暴発バグを修正。
![[Astro #98] LAYER FIGHTER: PS4コントローラー対応を全メニュー画面に実装](https://assets.lain-lab.com/images/uploads/astro-98-ftg-ps4-gamepad-menu.webp)
[Astro #98] LAYER FIGHTER: PS4コントローラー対応を全メニュー画面に実装
WebXR格闘ゲーム LAYER FIGHTER のメニュー画面にPS4コントローラー対応を実装。Gamepad APIをポーリングする共通React hookを1つ作り、全5画面に適用した記録。
![[Astro #97] LAYER FIGHTER: クレジットにステージ情報を反映](https://assets.lain-lab.com/images/uploads/astro-97-ftg-credit-stage-fix.webp)
[Astro #97] LAYER FIGHTER: クレジットにステージ情報を反映
LAYER FIGHTERのエンディングクレジットにステージの3Dモデル情報が表示されない問題を修正。Assets.jsonではなくStages.jsonから直接読み込むようimportを追加。
![[Hardware] NZXT Krakenの液晶を限界突破「NZXT-ESC」で自由自在にカスタムする方法](https://assets.lain-lab.com/images/uploads/nzxt-kraken-lcd-custom-nzxt-esc.webp?)
[Hardware] NZXT Krakenの液晶を限界突破「NZXT-ESC」で自由自在にカスタムする方法
NZXT CAMのWeb Integration機能を利用し、KrakenのLCDディスプレイに好きな動画やシステムステータスを自由なレイアウトで重ね置きできる神ツール「NZXT-ESC」をご紹介。
![[Astro #96] CreditBoard汎用化・VRM回転機能追加](https://assets.lain-lab.com/images/uploads/astro-96-creditboard-vrm-rotation.webp)
[Astro #96] CreditBoard汎用化・VRM回転機能追加
WITCreditBoardをCreditBoard.tsxとして汎用化し、ADV/RPG（STAGE_MY_ROOM）とパズルゲーム（木箱GLB付き）にクレジット看板を設置。VR/PC座標分岐、import type問題、外部VRM保存フローの調査、VRMアバターY軸回転機能の実装まで。
![[Astro #95] LAYER FIGHTER: ステージセレクト実装 & ジャンプ攻撃追加](https://assets.lain-lab.com/images/uploads/astro-95-stage-select-jump-attacks.webp)
[Astro #95] LAYER FIGHTER: ステージセレクト実装 & ジャンプ攻撃追加
WebXR格闘ゲーム LAYER FIGHTER にステージセレクト画面を実装し、ジャンプ攻撃を追加しました。VR/デスクトップ両対応のHUD二重表示バグも修正。