Written by Suraj Vishwakarma

Create VR based Website with Aframe

Introduction

Web development is one of the most thriving and potential markets for the people who are still getting used to this beautiful world of the internet. As the Developers focus more on AI, Machine learning, and Virtual Reality. This technology surely going to pay away in the future.

So today we are going to learn things based on one of this technology that is Virtual Reality aka VR in short. We are going to do using the Aframe framework for building a Virtual Reality. Aframe will create a VR website with a few lines of HTML code. This is fascinating at the beginner level in VR website development.

So let’s start by creating a frame scene using the Aframe.

Aframe Framework

A-Frame is a web framework for building virtual reality (VR) experiences. A-Frame is based on top of HTML, making it simple to get started. But A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js.

Originally conceived within Mozilla and now maintained by the co-creators of A-Frame within Supermedium, A-Frame was developed to be an easy yet powerful way to develop VR content. As an independent open source project, A-Frame has grown to be one of the largest VR communities. SOURCE – A-FRAME

Requirement

  • Brackets
    • This is a simple and clean text editor which provides features that we are going to use in this.
    • This has a feature of a live preview of the website which is going to be very useful while setting the environment.
    • It has an inbuilt server so no need for an external database program.
  • Web Browser
    • A web browser that supports HTML 5 will be great.

Getting Started

This is going to be very basic as it’s for a beginner who wants to start using A-frame. So for this, we are going to write the code and I will explain every step.

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

We start above Above, Basically, we have a basic outline of an HTML file with some other tags. Don’t worry I am going to explain every step of it.

<script></script>

We have imported the script for A-frame that is available on their’s website. Make sure you use the latest release of A-frame. You can use the import library in a framework such as react. 

<a-scene></a-scene>
  • This is the tag that contains all element which is going to be seen on the website.
  • You can see this tag as the body tag of an HTML file.
<a-box></a-box> and its attributes

This is an HTML tag of the Aframe framework which will provide you with a box more accurately a 3-D box.

Position, Rotation, and Color are the attributes of

  • Position- Position represents co-ordinate of the box or any object. It takes 3 Values for the x, y, and z-axis respectively.
  • Rotation- Same as Position takes 3 Values for x, y, and z-axis.
  • Color- This attribute as the name suggests will color the box.
<a-sky></a-sky>

This is used to create an environment. The environment can be created of color, and images, and most developers use 360° images.

Execution

After writing your piece of the program, make sure it is saved in your desired location. Simply click on the live preview button, which you can find on the top-right corner of your screen.

This will open a new window in your default web browser to show how the website is going to look. This is a live preview window and will change as you make the changes in the code. This will help you to change position, rotation and other attributes live and you don’t have to save and refresh again and again.

Output

If you did everything right then you will end up with the above output.

Aframe Website

If it doesn’t show refresh it, and surely it will appear if your code is right. This is the beginning of creating beautiful scenes in VR. Using this you can also create a Cylinder, Sphere, Cone, and other shapes for beginning the journey.

Last Note

You can do a lot of things by just using this framework. You can see a lot of examples on their website which will help to know more about it. You will have a frame entity and entity component system for creating a better website.

If you want to check my project on this subject you give visit my repository on GitHub -[https://github.com/surajsrv11/A-FRAME-]

I hope, this blog post has helped you in understanding the Aframe from a beginner’s perspective. Now you have a base, from here you can start your VR website journey. Always remember the SKY IS THE LIMIT. Thanks for reading the blog post.

Leave a Reply