embedded
埋め込みコンポーネントは、A-Frameの<canvas>要素からフルスクリーンのCSSスタイルを削除し、既存のウェブページのレイアウト内に簡単に埋め込むことができるようにするものです。埋め込みによって、キャンバスからデフォルトの固定位置が削除され、Enter VR ボタンが小さくなります。
# 例
埋め込みコンポーネントを追加し、<a-scene>要素を空の<div>であるかのようにCSSでスタイルを設定します。<a-scene> 内には <canvas> 要素があります。
a-scene {
height: 300px;
width: 600px;
}
<body>
<div id="myEmbeddedScene">
<a-scene embedded>
<!-- ... -->
</a-scene>
</div>
</body>
埋め込みシーンのインライン例です。
# 二次元ページとの統合
埋め込まれたシーンは視覚的に統合され、2Dページの他の部分と相互作用することができます。できることをいくつか紹介します。
- CSSの
z-indexを使用して、HTML要素をシーンの上または下に配置する。 - 透明な
<a-sky>または背景なしを使用して、ページの上に<a-scene>をオーバーレイし、その下にあるHTML要素を表示することができます。 - HTML要素（例：ボタン、フォーム）とのインタラクションを利用してシーンに影響を与える
# i-Frameを使う
1つのページに存在できる<a-scene>は1つだけです。代わりに、allowfullscreen="yes" と allowvr="yes" を指定した <iframe> を使用して、複数のシーンを表示することができます。今のところ、i-Frame がページと同じオリジンにない場合、モバイル用の WebVR polyfill は動作せず、デバイスの回転は追跡されません。