Загрузка...

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
Яндекс.Метрика
Все заметки Новая заметка Страницу в заметки
Страницу в закладки Мои закладки
На информационно-развлекательном портале SALDA.WS применяются cookie-файлы. Нажимая кнопку Принять, вы подтверждаете свое согласие на их использование.
О CookiesНапомнить позжеПринять