Codecademy Logo

Introduction to A-Frame

<script> Element

Inside an .html file, include A-Frame in the <head> element.

<head>
  <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>

<a-scene> Element

The A-Frame code is contained inside an

  • <a-box>
  • <a-sphere>
  • <a-cylinder>
  • <a-plane>
  • <a-sky>
<a-scene>
  <a-box position="-1 0.5 -3" color="#4CC3D9"></a-box>
  <a-sphere radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder radius="0.5" height="1" color="#FFC65D"></a-cylinder>
  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Learn more on Codecademy