Three.js + WebXRで“ドラゴンレーダー風UI”を再現 #javascript #threejs #gamedev #games #maths #minimap #anime

Three.js と WebXR で、VR空間内で「ドラゴンレーダーUI」を動作させるデモを作成。
NPC とプレイヤーの相対位置をリアルタイムに可視化し、コンパスUIを拡張してミニマップのように扱える “レーダーUIシステム” を実装しています。

コンパスの回転・HMDの向きと同期、NPC座標のマッピング処理など、
VR向けナビゲーションUIを Three.js × WebXR で再現した技術デモです。

▼ ブログ記事（実装・コード解説）
https://humanxai.info/posts/javascript-threejs-webxr-dragon-radar/

## 使用機材
* Meta Quest 2
* Three.js r152（WebXR対応）
* JavaScript（ESM構成）
* VSCode
* LiveServer

## 仕様概要
* コンパスUIの拡張（回転・座標表示）
* NPC座標をリアルタイムに取得しレーダー上にプロット
* HMDの向き（rotation.y）に追従するコンパス制御
* WebXRセッション内での安全な UI 描画

## 検索用キーワード
threejs / webxr / vr / javascript game dev / mini map ui / compass / quest2 / 3d web / ゲーム開発 / dragon radar / r152 / vr hud

Видео Three.js + WebXRで“ドラゴンレーダー風UI”を再現 #javascript #threejs #gamedev #games #maths #minimap #anime канала lain