The embedded component removes fullscreen CSS styles from A-Frame’s
<canvas> element, making it easier to embed within the layout of an existing webpage. Embedding removes the default fixed positioning from the canvas and makes the Enter VR button smaller.
embedded component, then style the
<a-scene> element with CSS as if it were an empty
<a-scene> is the
An example of an embedded scene:
Embedded scenes can be visually integrated and can interact with the rest of the 2D page. Some things we could do:
- Use CSS
z-indexto put an HTML element above or under the scene
- Use a transparent
<a-sky>or no background to overlay
<a-scene>on top of the page, with underlying HTML elements visible
- Use interaction with HTML elements (e.g., buttons, forms) to affect the scene
<a-scene> can exist on a page. Alternatively, we can use an
allowvr="yes" to display multiple scenes. For now, if the I-Frame is not on the same origin as the page, the WebVR polyfill for mobile won’t work and there won’t be any tracked rotation of the device.