WebXR

2026-01-04 | lain

WebXRで実装した右手コンパスUIを拡張し、NPCの位置をリアルタイムに可視化するドラゴンレーダー風UIを実装する。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#VR#UI#ゲーム開発#レーダー

2026-01-04 | lain

Three.jsのXRControllerModelFactoryを使って両手のVRコントローラを表示し、右手にコンパスUIを実装する方法を解説する。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#VR#XRControllerModelFactory#UI

2026-01-03 | lain

PC版で実装した段差・スロープ処理を、WebXR（VR）でそのまま使うと壊れる理由と、playerRigを基準に正しく成立させる設計を解説する。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#VR#ゲーム開発#衝突判定

2026-01-01 | lain

Three.js の WebXR 環境で、CanvasTexture を使いレーザーポインタ操作によるスクロールUIを自作した実装メモ。DOMを使わない空間UIの構成と考え方。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#Canvas#UI#VR

2025-12-28 | lain

GameBoxアーキテクチャの続編として、Three.jsでブロック崩しを実装完了まで仕上げる。ボール・パドル・ブロック衝突、勝利判定、ゲームオーバー表示、UIボタン連携までを整理する。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#GameDev#Architecture#Canvas

2025-12-28 | lain

VR と setAnimationLoop 環境で、衝突判定が破綻した本当の原因はロジックではなく「時間」だった。フレームが不連続になる現実と、その対処法。

カテゴリ： JavaScript

タグ： #three.js#WebXR#deltaTime#ゲーム開発#フレームレート

2025-12-27 | lain

Three.js と WebXR を使い、ブロック崩しを「箱の中の1オブジェクト」として実装する設計についてまとめました。ゲームを差し替え可能にするための GameBox / GameModule 構成と、THREE.Group の強力さを解説します。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#GameDev#Architecture#VR

2025-12-27 | lain

Three.js の VideoTexture をクラス化し、プレイリスト・サムネ表示・UI操作を統合した WebXR 対応動画プレイヤーを実装する

カテゴリ： JavaScript

タグ： #Three.js#WebXR#VideoTexture#UI#Class設計

2025-12-25 | lain

Three.jsとWebXRでVRの衝突判定を実装する際に必ず直面する「リグ・視点・ルームスケールのズレ」を、Box3とMatrix4の役割分離という観点から整理する。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#VR#衝突判定#Box3#Matrix4

カテゴリ：WebXR