A-Frame で WebXR 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表示時に様々なコントロール可能とします。