763 reads

How to Create a Simple A-Frame App with Plain HTML

by Marcos FabianAugust 20th, 2021

Too Long; Didn't Read

A-Frame is a framework built on top of WebVr, which facilitates creating 3D/VR/AR experiences on the web. In this quick tutorial, I will show you how fast it is to get going with this framework. The whole idea here is to take the HTML and flip it into A-frame. In HTML we have p, h1, h2, h3, br, span, small, strong, and many more tags. Using these tags we can create an entirely new environment that loads just like a regular page. You can add backgrounds, shapes, shapes and all types of stuff.

Company Mentioned

featured image - How to Create a Simple A-Frame App with Plain HTML

Do you know HTML? Do you know basic JavaScript? Well, let me tell you that if you do, then you would enjoy working with a framework called A-Frame. In this quick tutorial, I will show you how fast it is to get going with this framework and how easy it is to manipulate.

So What is A-Frame?

A-Frame is a framework built on top of WebVr, which facilitates creating 3D/VR/AR experiences on the web. Yes on the Web. 3D meanings creating three-dimensional content to be displayed on the web, just like on any other regular site. VR means Virtual Reality which is a simulation in which a person can interact within an artificial three-dimensional electronic. AR means Augmented Reality which is an exaggeration of the reality we humans see, for example, the Pokemon Go game. All these are components that could be done using the A-Frame framework.

Who should use this Framework?

If you are a programmer and you already know HTML well and have some knowledge of Javascript then A-Frame will suit you. If you do not understand HTML or Javascript then I suggest you learn those first, or you can just try this and check if is something you could do. Do not blame if you do not learn the basics first lol.

Anyways, we have so many companies nowadays providing three-dimensional content that is not even funny, so why not learning how to do your own.

HTML VS A-FRAME?

Lets look at a regular HTML file:

<html>
  <head>
    <title>This is an example </title>
  </head>
  <body>
    <h1>This is my page</h1>
  </body>
</html>

This HTML structure is what represents a page. The whole idea here is to take the HTML and flip it into A-Frame. How do we do that? Well we first needs to include the cdn into the head of the HTML structure. Something like this:

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

The CDN is included in a script tag in the head, it makes sure the A-Frame framework is loaded once the page starts. After that, THAT’S IT. That’s all you need to start adding A-Frame elements into the page. Now we need to learn about a few tags. In HTML we have p, h1, h2, h3, br, span, small, strong, and many more tags. Using the same idea we will use tags provided by A-Frame. So

a-scene - loads the environement
a-box - add a box to the screen
a-sphere - adds a sphere to the screen
a-plane - add a plane to the screen
... and so on.

With these 4 tags provided by A-Frame we can create an entirely new environment that loads just like a regular page. These are called primitive tags provided by A-Frame. There are way more so check their documentation.

Here is the full example:

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Yup, it is crazy to think that with these 14 lines you can generate something like this:

Well, now you know how to create a 360 experience with A-Frame, look at their documentation if you want to learn more about it. You can add backgrounds, assets, shapes, and all types of stuff.