Want a 3D scene without writing its rendering code? Load A-Frame and put an <a-scene> in the page. It encloses the scene’s objects and manages the 3D scene across VR settings and hardware. section 15.2
The markup can be deceptive: child elements such as <a-box> are not ordinary visible HTML boxes. They act as nonvisual data models for 3D objects; a <canvas> renders the scene. Inspect the DOM to see both the object elements and the canvas. 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>
A minimal page loads A-Frame, sets the scene background, and places a box, sphere, cylinder, and plane inside <a-scene>. section 15.2
