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-30 | lain

three.js上に用意したGameBox構造で、ブロック崩しに続く2作目としてシンプルなシューティングゲームを実装した。VRとPCの両対応UI、開始・終了・リスタートまで含めた設計を整理する。

カテゴリ： JavaScript

タグ： #three.js#WebGL#ゲーム開発#VR#設計

2025-12-27 | lain

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

カテゴリ： JavaScript

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

2025-12-25 | lain

Three.jsでNPCの頭上にセリフを表示し、キャラクターが反応しているように見せる実装方法をまとめます。

カテゴリ： JavaScript

タグ： #Three.js#WebGL#VR#UI

2025-12-25 | lain

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

カテゴリ： JavaScript

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

2025-12-24 | lain

Three.js + WebXRで、VRコントローラからRaycasterを飛ばしてPlaneのUIボタンをクリックするまでを最短で実装。matrixWorld→rayのorigin/direction更新とgamepad.buttonsでのトリガー取得が肝。

カテゴリ： JavaScript

タグ： #three.js#WebXR#VR#Raycaster#Gamepad

2025-12-23 | lain

WebXRでキャラクターを移動・回転させる最低限の実装手順をまとめた技術メモ。

カテゴリ： JavaScript

タグ： #WebXR#Three.js#VR#Character#Meta Quest2

2025-12-23 | lain

CSS3DRendererを使ってWebGL空間に外部サイトを表示しようとしたところ、GPUが落ちてブラウザがハードウェアアクセラレーションを自動無効化。CSS3Dの本質と限界を実体験から解説します。

カテゴリ： JavaScript

タグ： #Three.js#WebGL#CSS3DRenderer#iframe#VR

カテゴリ：VR