サイケデリックな無限迷宮体験「null」の WebXR / VR 版です。Google の次世代 XR ライブラリ Google XR Blocks を用いて構築されています。
- Google XR Blocks 完全対応:
xrblocksSDK による WebXR デバイス自動検出 & デスクトップシミュレータ統合- Quest 2/3/Pro, Android XR デバイス (Galaxy XR, XREAL Aura 等), Apple Vision Pro, PC VR ブラウザに対応
- 没入型 VR ロコモーション:
- コントローラー操作: 左スティックでスムーズ移動、右スティックで 45° スナップターン & 飛行高度調整
- ハンドトラッキング (手のジェスチャー): ピンチ操作で前進移動 / レゾナンス発動、サムズアップ・握り拳で飛行モード切替
- デスクトップシミュレータ: WASD 移動、マウス視点変更、Shift ダブルタップで飛行モード
- サイケデリック GLSL シェーダー:
- 動的モーフィング、催眠渦 (Hypnotic Swirls)、多重渦、チェッカーボードボルテックス、放射状波動、プリズム色分散、キラキラ光沢ガラスアルミニウム反射
- インタラクティブ VR クリスタル:
- 各部屋の中心に浮かぶクリスタルオーブ。レイ照射、ピンチ、接近タッチで光と共鳴音を放ち、触覚フィードバック(ハプティクス)が作動
- 3D 空間 HUD (Matrix HUD):
- 視界および左手首前方にリアルタイム表示される 3D ホログラムパネル(現在の部屋番号、迷宮座標、インテンシティ進捗バー、飛行状態)
- プロシージャル Web Audio 音響合成:
- 5 つのアンビエント和音ボイス、動的 LFO ビブラート、環境雨音・水音、壁接触摩擦音、クリスタル共鳴チャイム
# npm を使用して起動
npm startまたは Python や npx serve などのローカル HTTP サーバーで起動できます:
npx serve .
# または
python3 -m http.server 3000ブラウザで以下の URL を開きます:
- VR 版 (XR Blocks): http://localhost:3000/vr.html
- 通常 2D 版: http://localhost:3000/index.html
| 操作 | 動作 |
|---|---|
| 左スティック (L-Stick) | 前後左右へのスムーズ移動(壁コリジョンあり) |
| 右スティック 左右 (R-Stick X) | 45° スナップターン |
| 右スティック 上下 (R-Stick Y) | 飛行モード時の上昇・下降 |
| トリガー / A・X ボタン | 共鳴 (Resonance)・サイケデリック強度上昇・音楽起動 |
| グリップ / Squeeze (または F キー) | 飛行モード (壁抜け/Noclip) の切替 |
| ジェスチャー | 動作 |
|---|---|
| ピンチ (親指 + 人差し指) | 視線方向への前進移動 / クリスタル共鳴 |
| サムズアップ / 握り拳 (Fist) | 飛行モードの切替 |
| キー / マウス | 動作 |
|---|---|
| W / A / S / D または 矢印キー | 移動 |
| マウス移動 | 視点回転 (クリックでポインターロック) |
| クリック / スペースキー | 共鳴・インテンシティ上昇・音楽開始 |
| Shift 2回連続押し または F キー | 飛行モード切替 |
| スペース / Shift (飛行時) | 上昇 / 下降 |
| ESC | ポインターロック解除 |
.
├── vr.html # XR Blocks VR 版のエントリーポイント
├── vr.js # XR Blocks スクリプト (シェーダー、迷路生成、音響合成、VR入力)
├── vr.css # VR 用 HUD / UI スタイル
├── index.html # 通常 2D 版 (VR 版へのリンクボタン付き)
├── main.js # 通常 2D 版メインスクリプト
├── style.css # 通常 2D 版スタイル
└── package.json # プロジェクト設定および依存関係 (three, xrblocks)