はじめに
WebXR（Web Extended Reality）は、WebブラウザでVR（仮想現実）やAR（拡張現実）コンテンツを表示するためのAPIです。WebXRを活用すると、ブラウザ上でVRヘッドセットやARデバイスとインタラクションを行うことができます。この記事では、PCのキーボードでアバターを操作できるシンプルなWebXRアプリケーションを作成する方法を解説します。
具体的には、アバターをPCのキーボードで操作するために、どの方法が最適かを比較した上で、A-Frameを使用した実装方法を解説します。
実装方法の比較
アバターをPCのキーボードで操作するための実装方法として、以下の4つの方法を比較します。
| 方法 | 説明 | メリット | デメリット |
|---|---|---|---|
| 1. WebXR APIを使用する | WebXRのデバイス管理とインタラクションを直接利用する方法 | WebXRの標準に基づいており、AR/VRデバイスとの互換性が高い | キーボード操作に特化したサポートはなく、カスタムコードが必要 |
| 2. Three.js + WebXR | Three.jsとWebXRを組み合わせ、3D空間でのアバター操作を実現 | Three.jsにより3Dシーンの構築が容易、WebXRとの連携も強力 | Three.jsの学習コストがあり、WebXRに関する理解が必要 |
| 3. Gamepad APIとWebXRの組み合わせ | キーボード入力をゲームパッドの入力としてエミュレートする方法 | ゲームパッド入力と連携することで、操作感が向上する可能性あり | ゲームパッドの操作を模倣するための追加のロジックが必要 |
| 4. A-Frameを使用する | A-FrameはWebVR開発用の高レベルなフレームワークで、簡単にVRコンテンツを作成できる | VR/ARのコンテンツ作成が非常に簡単、キーボード操作のサポートが豊富 | カスタマイズ性がThree.jsに比べて制限されることがある |
A-Frameの利点とデメリット
-
メリット:
-
A-Frameは、HTMLタグベースのシンプルなVR開発フレームワークで、特別な知識なしでもVR/ARコンテンツを作成できます。 - VRシーンに対するデフォルトのキーボード操作（WASDキー）をサポートしているため、PCのキーボードで簡単に操作できます。
- WebXRと組み合わせて、VRデバイスやARデバイスを簡単にサポートできます。
-
-
デメリット:
- カスタマイズ性や柔軟性の面で、Three.jsほど細かい制御が難しい場合があります。高度なシーンやインタラクションを作成する際に制限を感じることがあります。
- 複雑な3Dシーンやパフォーマンス最適化が必要な場合には、Three.jsの方が柔軟でパフォーマンスに優れています。
チュートリアル
では、A-Frameを使って、PCのキーボードでアバターを操作できるシンプルなWebXRアプリケーションを作成してみましょう。今回は、アバターの動きを視覚的に確認できるように目印となるオブジェクト（赤い立方体）も配置します。
ステップ1: 必要なライブラリの読み込み
まず、A-FrameのライブラリをCDNから読み込みます。以下のコードをHTMLに追加してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebXR アバター操作 - A-Frame</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
ステップ2: A-Frameシーンの設定
次に、A-Frameの基本的なシーンを設定します。シンプルな3D空間を作り、アバターとして使う立方体と目印となる赤い立方体を配置します。目印となるオブジェクトは、アバターの動きが分かるように配置します。
<a-scene>
<!-- カメラ設定 -->
<a-camera position="0 1.6 0"></a-camera>
<!-- アバターとしての立方体 -->
<a-box id="avatar" position="0 1.5 -3" color="green" width="1" height="2" depth="1"></a-box>
<!-- 目印となる赤い立方体 -->
<a-box position="3 1.5 -3" color="red" width="1" height="1" depth="1"></a-box>
<!-- 地面 -->
<a-plane position="0 0 -4" rotation="-90 0 0" width="100" height="100" color="#7BC8A4"></a-plane>
</a-scene>
このコードでは、アバター（緑色の立方体）と目印（赤い立方体）を配置しました。目印となる赤い立方体を、アバターから少し離れた位置（position="3 1.5 -3"）に置いています。
Positionに関する補足
position="x y z":
x: 横方向（右/左）
y: 縦方向（上/下）
z: 奥行き方向（前/後）
例: position="3 1.5 -10"
このオブジェクトは、右に3ユニット、上に1.5ユニット、カメラから10ユニット奥に配置されます。
省略: positionを指定しないと、position="0 0 0"（原点）に配置されます。
ステップ3: キーボード操作の追加
次に、キーボードのWASDキーでアバターを動かせるようにします。A-Frameでは、wasd-controlsコンポーネントを使って簡単にキーボード操作を追加できます。
<a-scene>
<!-- カメラにwasd-controlsコンポーネントを追加 -->
<a-camera position="0 1.6 0" wasd-controls="enabled: true"></a-camera>
<!-- アバターとしての立方体 -->
<a-box id="avatar" position="0 1.5 -3" color="green" width="1" height="2" depth="1"></a-box>
<!-- 目印となる赤い立方体 -->
<a-box position="3 1.5 -3" color="red" width="1" height="1" depth="1"></a-box>
<!-- 地面 -->
<a-plane position="0 0 -4" rotation="-90 0 0" width="100" height="100" color="#7BC8A4"></a-plane>
</a-scene>
これで、WASDキーでカメラ（つまりアバター）を動かせるようになりました。
ステップ4: アバターのカスタマイズ
アバターの見た目を、GLTF形式の3Dモデルに変更することもできます。以下のように、外部のGLTFモデルをアバターとして読み込むことができます。
<a-scene>
<!-- カメラにwasd-controlsコンポーネントを追加 -->
<a-camera position="0 1.6 0" wasd-controls="enabled: true"></a-camera>
<!-- GLTFモデルをアバターとして読み込む -->
<a-entity gltf-model="url(path/to/avatar_model.glb)" position="0 1.5 -3" scale="0.5 0.5 0.5"></a-entity>
<!-- 目印となる赤い立方体 -->
<a-box position="3 1.5 -3" color="red" width="1
" height="1" depth="1"></a-box>
<!-- 地面 -->
<a-plane position="0 0 -4" rotation="-90 0 0" width="100" height="100" color="#7BC8A4"></a-plane>
</a-scene>
これで、外部の3Dモデルを使ったアバターにカスタマイズできます。
ステップ5: 完成したコード
以下が、目印とアバターを動かすための完成コードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebXR アバター操作 - A-Frame</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<a-scene>
<!-- カメラにwasd-controlsコンポーネントを追加 -->
<a-camera position="0 1.6 0" wasd-controls="enabled: true"></a-camera>
<!-- アバターとしての立方体 -->
<a-box id="avatar" position="0 1.5 -3" color="green" width="1" height="2" depth="1"></a-box>
<!-- 目印となる赤い立方体 -->
<a-box position="3 1.5 -3" color="red" width="1" height="1" depth="1"></a-box>
<!-- 地面 -->
<a-plane position="0 0 -4" rotation="-90 0 0" width="100" height="100" color="#7BC8A4"></a-plane>
</a-scene>
</body>
</html>
おわりに
この記事では、PCのキーボードでアバターを操作できるシンプルなWebXRアプリケーションを作成する方法を紹介しました。目印となるオブジェクトを配置することで、アバターの動きが視覚的に確認できるようにしています。A-Frameは、VR/ARコンテンツの作成が非常に簡単で、キーボード操作にも対応しているため、手軽にWebXRアプリケーションを試すことができます。
今後は、この記事の内容を基礎として、さらに複雑なシーンやインタラクションを作成し、独自のVR/AR体験を実現してみてください。