A-Frame で WebXR Dom-Overlay を利用する方法
A-Frame v1.1.0 でDom-Overlay、hit-testが使えるようになったのは、以前記事にしました。
今回は、そのうち、Dom-Overlayの設定方法を記載します。
WebXR の設定
Dom-Overlay設定の前に、A-FrameにWebXRを利用することを知らせる必要があります。
そのため、A-Frameにはwebxrコンポーネントが用意されています。
実装は簡単で、a-sceneタグにwebxrコンポーネントを設定するだけ
<a-scene webxr>
Dom-Overlay の設定
これだけではDom-Overlayを利用することができません。
Dom-Overlayを設定するには、以下２つが必要となります。
webxrコンポーネントの設定
先ほど設定したwebxrコンポーネントの引数として、
- optionalFeatures: dom-overlay
- overlayElement:#overlay
を設定します。
<a-scene webxr="optionalFeatures: dom-overlay; overlayElement:#overlay;">
これにより、dom-overlay機能が有効となり、IDがoverlayのタグ以下を対象として表示いたします。
overlayElementに設定する情報は任意となります。#overlayではなくても大丈夫です。
表示するDOMエレメントの作成
実際に表示するDOMエレメントの実装を行います。
<div id="overlay" ・・・></div>
上記divタグ配下にボタンなどを配置して、XR表示時に様々なコントロール可能とします。
