Dragging a mouse to turn a 3D object is familiar. Mixed reality moves beyond that flat-screen interaction: immersive experiences can respond to how you move, and augmented reality can place a virtual object in a view of the physical world. On the web, components can hide much of the rendering and interaction code behind HTML-like elements. section 15.2 section 15.5
A phone-based headset illustrates the shift in viewpoint. Accelerometer, gyroscope, and magnetometer readings can be combined to track head movement; slightly different views for the left and right eyes create a stereo 3D effect. Instead of dragging to look around, you turn your head. This describes a virtual-reality experience, while the augmented-reality examples add virtual objects to a physical-world view. 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>
Start with an HTML-like 3D scene: an A-Frame scene contains a box, sphere, cylinder, and plane, each configured through element attributes. The listing shows how a component-based interface avoids starting with shader code. section 15.2
The same idea extends to a single model. A `model-viewer` element loads a 3D asset through its `src` attribute; examples add automatic rotation or controls, then connect a search component to a model preview. For an augmented-reality option, a model-viewer example supplies a separate `ios-src` asset. These examples show component interfaces, not a claim that every immersive feature works identically on every device. section 15.2
Listing 15.6. AR with the model-viewer component
<model-viewer src="Astronaut.glb"
background-color="#45aa22"
ios-src="Astronaut.usdz"> #1
</model-viewer>
Inspect the small AR-oriented markup: the model has a primary 3D source and an iOS-specific USDZ source. It is a useful contrast with the larger scene setup hidden by the element. section 15.2
When a ready-made element is not enough, a custom element can wrap a canvas and a 3D engine. In the color-picker example, component attributes select an object and set its color and transparency; the scene component handles the camera, lights, render loop, and mesh updates. The surrounding interface can then treat a complex scene as one configurable element. section 15.2
