Want a 3D scene without starting with shaders or graphics-rendering code? A-Frame lets you describe one with tags in an HTML page. It is a web framework for virtual-reality experiences, but its immediate appeal is simpler: a scene that works in a browser and can also work in VR. 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>
The hello scene loads A-Frame with a script tag, opens an `<a-scene>`, then places a box, sphere, cylinder, and plane inside it. Attributes set properties such as position, rotation, color, and size. section 15.2
That small page produces a complete 3D scene. Its VR goggles icon enters immersive mode: on a desktop, this is full-screen; on a phone, A-Frame normally splits and distorts the view for stereoscopic viewing through lenses. section 15.2
The tags resemble a Web Components use case, but A-Frame does not technically use proper Web Components. Think of it as another way to hide 3D complexity behind an HTML-like interface, rather than an example of implementing the Web Components standard. section 15.2
