embedded

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.

Example

Add the embeddedcomponent, then style the <a-scene>element with CSS as if it were an empty <div>. Within <a-scene>is the <canvas>element.

            a-scene {
            height: 300px;
            width: 600px;
            }
            
            
              <
                body>
            
              <
                div
                id=
                "myEmbeddedScene">
            
              <
                a-scene
                embedded>
            
              <!-- ... -->
            
              </
                a-scene>
            
              </
                div>
            
              </
                body>
          

An example of an embedded scene:

Integration with the 2D Page

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

Using I-Frames

Only one <a-scene>can exist on a page. Alternatively, we can use an <iframe>with allowfullscreen="yes"and 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.