![[JavaScript] PlaneGeometryで地形を生成し、登れる世界を作る（山・クレーター・JSONマップ設計）](https://assets.lain-lab.com/images/uploads/javascript-threejs-planegeometry-terrain-generation.webp)
[JavaScript] PlaneGeometryで地形を生成し、登れる世界を作る（山・クレーター・JSONマップ設計）
Three.jsのPlaneGeometryを地形として扱い、高さ関数による平地・山・クレーター生成、ワールド座標による継ぎ目解消、JSONとグリッド設計によるマップ管理、重力と接地処理による歩行可能な世界構築までをまとめる。
ARCHIVE_INDEX / PAGE_19
TOTAL_ITEMS: 582
![[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イベント設計とドラッグスクロールの実装例。
![[JavaScript] 複数ゲームを切り替えるためのシンプルなシーン設計](https://assets.lain-lab.com/images/uploads/javascript-game-switching-design.webp)
[JavaScript] 複数ゲームを切り替えるためのシンプルなシーン設計
複数ゲームを切り替えるためのシンプルなシーン設計
![[JavaScript] Three.jsでボールバウンドアニメーションを実装する｜Canvas2D実装の移植ログ](https://assets.lain-lab.com/images/uploads/javascript-threejs-ball-bound-animation.webp)
[JavaScript] Three.jsでボールバウンドアニメーションを実装する｜Canvas2D実装の移植ログ
Three.jsでGameBox内に複数ボールのバウンドアニメーションを実装する過程を解説。Canvas2D由来のロジックをVector3ベースに移植し、deltaTime管理、壁反射、ボール同士の衝突判定、残像表現を行う。
![[JavaScript] three.jsで作る「箱の中のゲーム」設計：シューティング編 (VR / PC両対応)](https://assets.lain-lab.com/images/uploads/javascript-gamebox-simple-shooting.webp)
[JavaScript] three.jsで作る「箱の中のゲーム」設計：シューティング編 (VR / PC両対応)
three.jsとJavaScriptで構築したGameBox構造を使い、2作目となるシンプルなシューティングゲームを実装。VRとPCの両方に対応したUI制御、ゲームの開始・終了・リスタート、差し替え可能なGameModule設計について解説する。
![[JavaScript] Three.jsで花火を実装して分かった、プロっぽく見せるための設計](https://assets.lain-lab.com/images/uploads/javascript-threejs-firework-particle-design.webp)
[JavaScript] Three.jsで花火を実装して分かった、プロっぽく見せるための設計
Three.jsで花火を実装する過程で遭遇した粒子が消えない問題、filterの罠、PointsとBufferGeometryの使い方、減速して止まり落下する演出など、プロっぽく見せるための考え方と実装ポイントを整理した記録。