Introduction to aframe

Introduction to aframe

Aframe is a framework created by folks at Mozilla. It makes it easy to get started with virtual reality. It is built on top of threejs. There are lot of components built with aframe, along with a lot of community made ones.

Aframe makes it easy even for a JS amatuer to create good VR experiences. With little more knowledge of threejs, you can also create your own aframe components. Since it’s using threejs internally, there is no limit to what is possible, since you can create your own custom components when something you want is not available.

What is aframe

Aframe is an entity component system based in threejs.

Aframe makes it easier to deal with threejs. Aframe also has a lot of community based components. That makes it easier for anyone to get started in virtual reality development with the complete knowledge of threejs. What is great about aframe is that, if you want to create your own custom components, you can do that with threejs.

The best way to understand aframe would be through an example.

Let’s create a simple way to display 360 images.

There are different ways to build VR app with aframe. Here, we’re going to build using regular HTML.

Developing with aframe

First we have to include the aframe JS build in the HTML.

All the aframe action happens within a-scene component. Inside this you can add your other components.

Lets add a simple ball in our scene.

See the Pen aframe simple example by Rison Simon (@rison) on CodePen.dark

That’s it. Lets go through the components that we used.

a-scene

This creates a threejs scene. All entities are contained within the scene. The scene can contain assets, geometry and so on. When writing an aframe code, the components are wrapped inside a-scene.

a-sphere

This component creates spherical or polyhedron shapes. Inside, it creates a geometry component with primitive set as sphere.

So this is the most basic example in aframe. Now that we have successfully created a sphere in our environment, lets create something more complex.

Panorama in virtual reality

For this introduction to aframe, we are going to display a panorama inside our a-scene. When viewed from a non VR device like a desktop computer, it’ll give you option to drag around the panorama. When viewed in VR, you can move your head around to view the panorama.

Since we’re using aframe, which wraps threejs functions into custom components, we are able to do create 360 panorama virtual reality very easily. If we were doing it in plain threejs, more code and thought would be required. We would have to write code for handling in non VR devices and VR devices.

We’re going to use this 360 image from our tutorial to create a VR app in 10 minutes.

See the Pen Aframe – Panorama by Rison Simon (@rison) on CodePen.dark

It’s that simple.

What did aframe do here?

Let’s go through what aframe did here. The first tag is a-scene. As explained previously, this creates a threejs scene. This is where we add our content.

a-sky creates a spherical geometry in threejs. It is used to give a background or display a 360 equirectangular photos. When this code is run, the camera is at the center of the sphere and we’re looking around.

When VR mode is activated in non VR enabled devices, it’ll toggle fullscreen. Else it’ll display the VR effect.

Taking it further

This has been a just an introduction to aframe. There are a lot more things aframe is able to do. There are a lot of built in components, community built components and best of all, you can also create your own components to suit your needs.