こんにちは！
デザイナーの伊東（@ALAKIWebVRAR1）です。
※TwitterでもWebARの事を中心に情報発信中！
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1
今週もWebVR 開発の記事をお届けいたします。
これまでのWebVR 開発の記事は下記からご確認いただけます。
- 第5回 A-Frameでテキストを扱う
- 第4回 サンプルで学ぶA-Frameの使い方
- 第3回 blenderを使って3Dモデリングに挑戦
- 第2回 three.jsを使って3Dに触れる
- 第1回 WebVRとは
今までは、A-FrameでどのようにVRコンテンツを作成するかを中心にご紹介してきました。
今回は、VRデバイスからどのように情報を受け取るのかというところにスポットライトを当てたいと思います。
前半はヘッドセットから、後半は手に持つコントローラーの情報を取得します。
視点の情報を取得する
視点をカーソルとして表示する
まずはVRデバイスを装着した時の視点を、目に見える”カーソル”として表示してみましょう。
カーソルを表示させるには、a-cameraタグの設定を少し触ります。
|
1 2 3 4 5 6 7 |
<a-camera position="0 0 1" cursor-visible="true" cursor-scale="2" cursor-color="#ff0000" cursor-opacity="0.5"> </a-camera> |
各オプションを詳しくみてみましょう。
| cursor-visible | カーソルを表示させるかどうか（true/false） |
| cursor-scale | カーソルの大きさを調整 |
| cursor-color | カーソルの色を設定 |
| cursor-opacity | カーソルの透明度を調整 |
カーソルが当たった時のイベントを取得する
カーソルを表示させるだけであれば、A-Frameのタグとプロパティだけで自在に表示させられることがわかりました。
次はカーソルがオブジェクトに当たった時のイベントを取得してみたいと思います。
まずは先ほどご説明したa-cameraタグに、”look-controls”というプロパティを設定します。
|
1 2 3 4 5 6 7 8 9 |
<a-camera position="0 0 1" cursor-visible="true" cursor-scale="2" cursor-color="#ff0000" cursor-opacity="0.5" look-controls > </a-camera> |
このプロパティは、視点の動きとVRコンテンツ内のオブジェクトの位置を正確に連動させるために設定するようです。
こうすることで確実にイベントを取得することができます。
肝心のイベントの取得は、javascriptで行います。
（jqueryの書き方で記述したところ、うまくいきませんでした。。）
|
1 2 3 4 5 6 |
<script type="text/javascript"> var target = document.getElementById("target"); target.addEventListener("click", function() { console.log("hit!"); },false); </script> |
対象のオブジェクトにカーソルが当たると、コンソールが表示されたら成功です！
コントローラーの情報を取得する
コントローラーを表示する
視点情報の取得ができたら、今度はコントローラーの情報をとってみます。
まずは、WebVR空間にコントローラーを表示させましょう。
|
1 |
<a-entity laser-controls="hand: right" oculus-go-controls="hand:right; armModel:true;"> |
今回はOculus Goの右手に持つコントローラーを操作している想定です。
VRオブジェクトを生成するe-entityタグをベースに、oculus-touch-controlsというコンポーネントで、コントローラーを表示しています。
また、laser-controlsコンポーネントでコントローラーからでるレーザーを描画することもできます。
面白いことに、タッチコントロールもレーザーコントロールも、それぞれ右手左手を指定する必要があります。
これによりコントローラー・レーザーの描画位置も変わるようです。
レーザーが当たった時のクリックイベントを取得する
先ほどの視点カーソルのイベントと同じく、VRデバイスのコントローラーのイベントも、javascriptのイベントリスナーで簡単に設定できます。
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> var target = document.getElementById("target"), obj = document.getElementById("obj"); target.addEventListener("click", function() { obj.setAttribute('material', 'color: red'); },false); </script> |
特定のオブジェクトにレーザーがあたり、クリックが発生すると、色を変更するコードになります。
通常のJSのクリックイベントの受け取り方と全く一緒ですね。
まとめ
いかがだったでしょうか。
一見難しそうに感じるVRデバイス側からの情報の取得も、A-Frameが用意したコンポーネントを利用することで、javascriptで簡単にイベントを監視することができました。
通常のVRアプリよりもWebVRは制限されていることが多いと言われていますが、今回のような技術を利用すればよりインタラクティブなコンテンツが作れるようになるでしょう。
今後もWebVRの可能性を模索していきたいと思います。
