![[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制御までを段階的に解説する。
ARCHIVE_INDEX / PAGE_29
TOTAL_ITEMS: 702
![[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配置を通して見えてきた、数学と哲学が交差する地点を辿る。
![[JavaScript] PlaneGeometryで地形を生成し、登れる世界を作る（山・クレーター・JSONマップ設計）](https://assets.lain-lab.com/images/uploads/javascript-threejs-planegeometry-terrain-generation.webp)
[JavaScript] PlaneGeometryで地形を生成し、登れる世界を作る（山・クレーター・JSONマップ設計）
Three.jsのPlaneGeometryを地形として扱い、高さ関数による平地・山・クレーター生成、ワールド座標による継ぎ目解消、JSONとグリッド設計によるマップ管理、重力と接地処理による歩行可能な世界構築までをまとめる。
![[JavaScript] WebXRでドラゴンレーダーを作る：コンパスUIを拡張してNPC位置を可視化する](https://assets.lain-lab.com/images/uploads/javascript-threejs-webxr-dragon-radar.webp)
[JavaScript] WebXRでドラゴンレーダーを作る：コンパスUIを拡張してNPC位置を可視化する
Three.jsとWebXRで実装したコンパスUIをベースに、NPCとプレイヤーの相対位置を計算して表示するドラゴンレーダー風UIを実装。3Dゲームのミニマップと同等の情報を、VR向けに最適化して表現する設計と実装ポイントを解説する。
![[JavaScript] WebXRでVRコントローラを表示する：XRControllerModelFactoryと右手コンパスUIの実装](https://assets.lain-lab.com/images/uploads/javascript-threejs-webxr-controller-compass-ui.webp)
[JavaScript] WebXRでVRコントローラを表示する：XRControllerModelFactoryと右手コンパスUIの実装
Three.jsとWebXRでXRControllerModelFactoryを使い、両手のVRコントローラを正しく表示する方法と、playerRigに追従する右手コンパスUIの実装手順を解説。VR向けUI設計として、ミニマップではなくコンパスを選ぶ理由も具体的に説明する。
![[JavaScript] Three.jsでPC向けミニマップを実装する方法（viewport / scissor を使った複数カメラ描画）](https://assets.lain-lab.com/images/uploads/javascript-threejs-pc-minimap-multiple-cameras.webp)
[JavaScript] Three.jsでPC向けミニマップを実装する方法（viewport / scissor を使った複数カメラ描画）
Three.jsでPC向けミニマップを実装する方法を解説。viewportとscissorを使った複数カメラ描画の仕組み、実装例、よくある疑問点、そしてWebXR（VR）では同じ方法が難しい理由まで具体的にまとめる。
![[JavaScript] Three.jsで地球の上をキャラクターが走り続けるアニメーションを作る（球面座標＋法線＋lookAt）](https://assets.lain-lab.com/images/uploads/javascript-threejs-earth-runner-spherical-walk.webp)
[JavaScript] Three.jsで地球の上をキャラクターが走り続けるアニメーションを作る（球面座標＋法線＋lookAt）
three.jsで地球の表面を走るキャラクターを実装する。球面座標（theta/phi）で座標を求め、地球法線でキャラの上方向を合わせ、lookAtで進行方向を向かせる。モデルの前方向補正や、2体をMath.PIずらして周回させる実装もまとめる。
![[JavaScript] VRで段差とスロープが壊れる理由と、正しく動かす方法](https://assets.lain-lab.com/images/uploads/javascript-vr-step-slope-player-rig.webp)
[JavaScript] VRで段差とスロープが壊れる理由と、正しく動かす方法
Three.js + WebXRで、段差やスロープを自然に上がれる移動処理を実装する。VRではロジックを変えず、カメラを制御しない設計が重要になる。
![[JavaScript] Three.jsで段差を登って降りられるキャラクター移動を実装する](https://assets.lain-lab.com/images/uploads/javascript-threejs-step-up-down-character-controller.webp)
[JavaScript] Three.jsで段差を登って降りられるキャラクター移動を実装する
Box3による単純な衝突判定を拡張し、colliderとtype設計を導入することで、three.js上で段差の上り下りが可能なキャラクター移動を実装する。
![[JavaScript] Three.js + WebXR で CanvasTexture を使ったスクロールUIを自作](https://assets.lain-lab.com/images/uploads/javascript-threejs-webxr-canvastexture-scroll-ui.webp)
[JavaScript] Three.js + WebXR で CanvasTexture を使ったスクロールUIを自作
Three.js と WebXR を使い、CanvasTexture を3Dメッシュに貼り付けてスクロール可能なテキストUIを実装する方法を解説。Raycasterを用いたUIイベント設計とドラッグスクロールの実装例。