![[JavaScript] WebAudio × three.js で作るサウンドリアクティブ・ジオメトリアニメーション](https://assets.lain-lab.com/images/uploads/javascript-webaudio-threejs-sound-reactive-geometry.webp)
[JavaScript] WebAudio × three.js で作るサウンドリアクティブ・ジオメトリアニメーション
nw_wrld に影響を受け、WebAudio の解析結果を three.js に直接接続することで、サウンドリアクティブなジオメトリアニメーションを実装した。BoxGeometry を中心に、状態管理・色制御・ジオメトリ切り替えの設計をまとめる。
ARCHIVE_INDEX / PAGE_18
TOTAL_ITEMS: 582
![[JavaScript] Three.jsでRPGバトルを仕上げる｜敵ターン追加・HP決着・テンポ調整・不具合潰し](https://assets.lain-lab.com/images/uploads/javascript-threejs-rpg-battle-complete.webp)
[JavaScript] Three.jsでRPGバトルを仕上げる｜敵ターン追加・HP決着・テンポ調整・不具合潰し
Three.js製RPGバトルを完成形へ持っていく実装メモ。Battleクラスに敵ターン（enemyフェーズ）を追加し、HPによる勝敗判定、敵の接近→攻撃→待機→帰還アニメ、delta秒ベースのwaitDuration管理、UI表示やSEの多重発火を防ぐフラグ設計を解説。
![[JavaScript] Three.js / WebXRで一生使い回せるMessageBoxを実装](https://assets.lain-lab.com/images/uploads/javascript-threejs-webxr-reusable-messagebox.webp)
[JavaScript] Three.js / WebXRで一生使い回せるMessageBoxを実装
Three.jsとWebXRで動作するMessageBoxを、ゲームループ主導・入力制御・自動クローズ対応で実装した。CanvasTextureの限界や、あえて深追いしなかった設計判断も含めた実装ログ。
![[JavaScript]スマホでサブ的にコーディングする現実解 ─ 開発者向け実践ガイド](https://assets.lain-lab.com/images/uploads/javascript-mobile-sub-coding-threejs-webxr.webp)
[JavaScript]スマホでサブ的にコーディングする現実解 ─ 開発者向け実践ガイド
Three.js / WebXR 開発者が、スマートフォンを“補助脳”として活用するための実践ガイド。vscode.dev + Codespaces を軸に、PlayCode や Termux + Code Server まで含めた現実的な選択肢と使い分けをまとめる。
![[JavaScript] Zone切り替えBGMを自然につなぐサウンド設計（フェード対応）](https://assets.lain-lab.com/images/uploads/javascript-zone-bgm-sound-design-fade.webp)
[JavaScript] Zone切り替えBGMを自然につなぐサウンド設計（フェード対応）
ZoneベースのBGM切り替えで起きがちな違和感を、JSONによるデータ管理とsound.jsへの責務集約、フェードイン・フェードアウト設計で解決する。Three.jsやWebXRに依存しないサウンド設計の考え方。
![[JavaScript] Three.jsでsin波に沿って拡散するスプライト演出を試作した記録](https://assets.lain-lab.com/images/uploads/javascript-threejs-sin-wave-sprite-animation.webp){kind=icon}
[JavaScript] Three.jsでsin波に沿って拡散するスプライト演出を試作した記録
three.jsでSpriteとCanvasTextureを使い、sin波に沿って生成される星形スプライト演出を実装した記録。単調さの解消、多方向化、やりすぎて破綻した設計を戻した判断まで含めて整理する。
![[JavaScript] Three.jsでMarchingCubes（Metaballs）を動かす](https://assets.lain-lab.com/images/uploads/javascript-threejs-marchingcubes-metaballs.webp)
[JavaScript] Three.jsでMarchingCubes（Metaballs）を動かす
Three.jsのMarchingCubes（Metaballs）を実際の箱庭シーンに配置して動かした記録。update()必須の罠、透明マテリアルとdepthWrite、world座標からMetaballs空間への変換など、実装で詰まった点を中心にまとめる。
![[JavaScript] Three.jsで地形にゾーンを持たせてエンカウントを制御する（tile→ASCII map→ZONE_DEFS）](https://assets.lain-lab.com/images/uploads/javascript-threejs-terrain-zone-encounter.webp)
[JavaScript] Three.jsで地形にゾーンを持たせてエンカウントを制御する（tile→ASCII map→ZONE_DEFS）
Three.jsのタイル地形をJSON/ASCII mapで管理し、legendにtype/zone/textureを集約。地面コライダーのzoneをプレイヤーへ伝播し、ZONE_DEFSでエンカウントを制御する設計と実装手順をまとめる。
![[JavaScript] Three.jsでRPGバトルをゼロから組む｜フェーズ管理・UI・アニメーション・SEまで](https://assets.lain-lab.com/images/uploads/javascript-threejs-rpg-battle-phase-system.webp)
[JavaScript] Three.jsでRPGバトルをゼロから組む｜フェーズ管理・UI・アニメーション・SEまで
three.jsを使ってRPGのバトルシステムをゼロから実装。エンカウント管理、フェーズ駆動のBattleクラス設計、敵出現演出、コマンドUI、プレイヤー行動アニメーション、効果音・BGM制御までを段階的に解説する。
![[JavaScript] Three.jsでPMXにVPD（ポーズ）を適用する方法](https://assets.lain-lab.com/images/uploads/javascript-threejs-pmx-vpd-mmdloader.webp)
[JavaScript] Three.jsでPMXにVPD（ポーズ）を適用する方法
Three.jsのMMDLoaderを使ってPMXモデルにVPD（ポーズ）を適用する方法を解説する。自前パースでハマりやすいポイントや、CCDIKSolverとMMDAnimationHelper.pose()を使った安定した実装方法、VMDとの使い分けについてまとめる。
![[JavaScript] Three.jsでRPG風コマンドUIをゼロから組み上げる（CanvasTexture編）](https://assets.lain-lab.com/images/uploads/javascript-threejs-rpg-command-ui-canvastexture.webp)
[JavaScript] Three.jsでRPG風コマンドUIをゼロから組み上げる（CanvasTexture編）
Three.jsでDOMを使わず、PlaneとCanvasTextureを使ってRPG風のコマンドUIを実装する過程を整理する。表示・非表示、選択移動、入力処理の分離までを扱い、サブメニュー実装手前で区切る。
![[JavaScript] 我思う、ゆえに座標あり ― ルネ・デカルトとデカルト座標系](https://assets.lain-lab.com/images/uploads/math-cogito-ergo-coordinate-descartes.webp)
[JavaScript] 我思う、ゆえに座標あり ― ルネ・デカルトとデカルト座標系
ルネ・デカルトが生み出したデカルト座標系は、単なる数学的手法ではない。Three.jsでの3D座標、カメラ制御、UI配置を通して見えてきた、数学と哲学が交差する地点を辿る。