liveBook · Manning

Immersive mode

As explained in Web Components in Action

Immersive mode is a display mode that presents an experience through a full-screen or headset-based immersive view.

Immersive mode presents a web experience through a full-screen or headset-based view. A desktop may simply go full-screen, while phones and headsets can render stereoscopic views for VR lenses. section 15.2

Entering immersive mode from an A-Frame scene

A minimal A-Frame scene creates a box, sphere, cylinder, and plane in HTML. Its VR-goggles control lets the user enter immersive mode; on supported phones, the display splits into left and right views and compensates for headset lenses. section 15.2

Listing 15.2. A-Frame hello WebVR scene
<html>
<head>
   <title>Hello, WebVR! • A-Frame</title>
   <script src="aframe.min.js"></script>                                   #1
</head>
<body>
<a-scene background="color: #ECECEC">                                      #2
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow>
        </a-box>                                                           #3
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow>
        </a-sphere>
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color=
        "#FFC65D" shadow></a-cylinder>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4"
        color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>

Inspect the minimal A-Frame HTML scene that supplies the objects shown before entering immersive mode. section 15.2

How Web Components in Action covers it

How deep it goes
Describes desktop, phone, and headset behavior, but stops short of detailing the underlying browser API.
Examples
Uses an A-Frame hello-world scene, VR-goggles control, Google Cardboard lenses, Daydream, and desktop VR headsets.
What it assumes
Starts from HTML scene tags, making basic A-Frame scene construction the main assumed starting point.
What you can do after
Apply it via A-Frame to expose a 3D web scene through full-screen or headset-based viewing.
How it connects
Connects immersive mode with A-Frame, stereoscopic 3D, virtual reality, WebVR, and headset controllers.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.