Post
Ask Question

Getting Started With A-Frame - An Overview

Introduction

A-Frame is a technology of web frameworks to build a Virtual Reality (VR) experience in our application. This can be developed from a simple HTML code file without installing any further dependencies. A-Frame is based on top of HTML, making it simple to get started.

A-Frame supports most of the VR platforms and can be used for Augmented Reality as well. This provides the virtual reality experiences of 360° content with the full controller.

Implementation

  1. Create a simple index.html markup file.

    Include aframe.min.js given on the below location under Head tag.
    1. <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>  
  1. Use <a-scene> under body tag. A-Frame will handle the remaining setup and controls. You don't need to install anything extra and no build is required.
  1. Your file will be as below.
    1. <html>  
    2.   <head>  
    3.     <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>  
    4.   </head>  
    5.   <body>  
    6.     <a-scene>  
    7.       <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>  
    8.     </a-scene>  
    9.   </body>  
    10. </html>  

We are using <a-box> to create any shape such as cube, wall etc. Open the file in the browser and you will have the following,

Getting Started With A-Frame - An Overview

 

Now, add more objects to your scene.

In the above shape, you can check the rotation of objects on your browser.

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

Open the above file in the browser and see the different shapes on your scene.

Getting Started With A-Frame - An Overview

You can add other shapes and also, you can change the position of these shapes with the help of the position attribute associated with it.

Not only this, we can use the plugin directly from the script tag by associating the location or can download it for our application to serve it locally.

You can get the development version here.


Similar Articles