“Hello World” with AFrame
Familiarize yourself with AFrame and create a simple “Hello World” VR experience
What is AFrame?
AFrame is an open-source web-based framework for developing virtual reality (VR) applications. These VR applications work through WebXR compatible web-browsers. A developer can setup 3D scene graphs and access the powerful entity-component framework through familiar HTML and Javascript. The AFrame developer community has created various add-in components and libraries. These add-ins extend and support fully immersive interactive applications for both VR and augmented reality (AR) using compatible devices and controllers.
Setup
AFrame doesn’t require any setup or installation. As a Javascript implementation, you only need to include the AFrame library. The following lines of code creates an empty AFrame-enabled file:
<html>
<head>
<meta charset="UTF-8">
<title>Hello World! with AFrame</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<!--Actual scene here -->
</body>
</html>
Create a new HTML file on your device, called helloworld.html and add the above code to it. If you open this in a browser, you will see that it is just a blank page with nothing visible. Let’s add to this.
AFrame arranges the virtual world (AR or VR) as a scene graph. Just like adding elements in HTML, we declare this as follows within the <body> tag of the above file:
<a-scene background="color: #FAFAFA">
<!--Actual scene elements here -->
</a-scene>
If you add this to the page and reload it, you will now notice a VR icon on the bottom right of the page like the VR icon-image below (see Figure 1).
Figure 1: AFrame sample with VR icon on the bottom right
This VR icon when clicked, puts the browser into VR mode. If the page was displayed on a smartphone browser, it will split the view into two, one for each eye (as seen in Figure 2).
Figure 2: Sample split view on smartphone
So far the virtual world exists, but has nothing in it. As a designer of the world, its your job to populate it. Let’s add a few objects to the world. We will use primitives (or pre-defined elements) to achieve this:
<a-scene background="color: #FAFAFA">
<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-scene>
On saving the objects and refreshing the page, you should see a scene similar to the one in Figure 3.
The primitive tags used here are fairly self-explanatory. To draw a sphere, you use the <a-sphere> tag. Just like HTML tags, it accepts attributes like radius, position and color. If one or more of these attributes are not provided, default values are assigned.
Figure 3: Hello World! AFrame
Adding ‘Hello World!’ Message
To add text, we use the <a-text> tag like the one below and add it to the scene (see Figure 4).
<a-text value="Hello, World!" color="#0000FF" position="-0.5 2.5 -3.0"></a-text>
Adding text into graphics scenes is a lot more complicated than in web-pages. If you wish to explore this further, several customizations are available to decorate, position and interact with the text.
Figure 4: Hello World! AFrame with text
Reach your personal and professional goals
Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.
Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.
