A-Frameの要素を使ってVRコンテンツを描画する場合、デフォルトで全画面になってしまう。

上位の要素にposition: relative; を付与しても、自動生成されるCanvas要素が全画面になるスタイル設定になっているため、無意味。

[方法1] iframeで埋め込む

3Dモデル表示用htmlを作成し、iframe使って埋め込めばWebコンテンツの一部として描画できる。

<iframe src="model.html" width="1280px" height="720px"></iframe>

ただし、ボタンインタラクションによる表示内容切り替えとかの連携が面倒くさく、また描画コストが高くなる気がするのであまりおすすめできない。

[方法2]embedded パラメータを指定

Webコンテンツの一部として描画したい場合は、要素にembedded パラメータを指定する。

<a-scene embedded>
    <a-entity id="univ" fbx-model="src: url(object.fbx);" position="0 0 0" scale="1 1 1" rotation="0 0 0"></a-entity>
</a-scene>