VR Pakistan
Published in

VR Pakistan

Getting Started — A-Frame VR Development Part 1

This is the first part of A-Frame Virtual Reality Development series, in this part I will explain the basic components and syntax of the A-Frame framework and will create a simple Hello World Virtual Reality project using A-Frame.

Before getting started, if you don’t know basic web development technologies and never worked in the web then please first learn some HTML, CSS, and Javascript basic skills, then follow this tutorial.

Throughout the tutorial, I will be sharing the code with pictures step by step so you can understand easily. So lets get started.

Create an index.html file and write basic HTML DOCTYPE syntax in it.

Insert the A-Frame framework script inside `<head></head>` container

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

Note : You can also install A-Frame using NPM. Use `$ npm install aframe` command.

Now let’s explore the A-Frame syntax. A-Frame is based on custom created HTML elements. As you can is in the picture below every object is represented by a custom HTML element.

Creating a Scene

First, we have to create a scene, which will configure the basic components for us like canvas, rendered, camera, lights etc. It’s a container where all the elements of VR environment will come inside it.

Add the `<a-scene></a-scene>` tag inside the body to initialize the scene.

If you open the index.html file in your browser you will notice that after initializing the scene a small VR icon can be seen on the page.

Adding a Cube/Box

Let’s insert a 3d box in it.

Add `<a-box color=”red”></a-box>` ` inside the `<a-scene>` tag.

Now if you refresh index.html you’ll see nothing. But if your press S key on your keyboard, the camera will start moving backward and you’ll see a red box. The reason that you didn’t see the box in the first place is that the position of the camera and the box is same, both are placed at the same point (origin [0,0,0]) in the screen.

Now before adding more elements let me tell you what are Primitives and Entities in A-Frame.

`<a-scene>`,` <a-box>`,` <a-sphere>` etc all are pre-defined custom HTML tags by A-Frame, which are easy to use tags and are called Primitives.

On the hand `<a-entity>` can by any element. It can be a box, a scene, a sphere, a light or camera. All the `<a-scene>`,` <a-box>`,` <a-cube>` etc are the pre-defined entities for ease of use. However, if you want custom shapes and advanced features like sound in your VR environment `<a-entity>` will help you there.

For example underneath a `<a-box>` tag there is an `<a-entity>` tag with pre-defined position and geometry :

<a-entity id=”box” geometry=”primitive: box” material=”color: red”></a-entity>

I hope you got the different between the Primitives and Entities. Don’t worry if you’re still confused, you’ll understand it much better once we’ll use <a-entity> tags.

Changing Properties

Changing the properties of Primitives is also very easy. Lets put our box in front of our camera.

Add a position attribute in the `a-box` tag. Position attribute specifies the position on X, Y and Z axis of the element.

<a-box position=”0 2 -5″ color=”red”></a-box>

Add a rotation attribute in the `a-box` tag. Rotation attribute specifies the rotation on X, Y and Z axis of the element.

<a-box position=”0 2 -5″ rotation=”0 45 45″ color=”red”></a-box>

And add scale attribute to scale the element on X, Y and Z axis.

<a-box position=”0 2 -5″ rotation=”0 45 45″ scale=”2 2 2″ color=”red”></a-box>

Now your box will look like this.

Play around with the properties of the box all are listed here: https://aframe.io/docs/0.8.0/primitives/a-box.html#attributes

Adding background / Skybox

Skybox is the background of the 3D world. `<a-sky></a-sky>` is used to put background in the scene.

<a-sky color=”#94c5d6″></a-sky>

Add the `<a-sky>` tag inside the `<a-scene>` container. I have used simple hex-coded color for the sky color, but you can also use an image for the sky background. After adding the sky your scene will look like this

In this part, we’ve covered the basic syntax of A-Frame framework, made a simple scene with a box and add properties to it. In the next tutorial, we’ll look into the camera, lights and animations with their respective properties.

Complete code available on Github : https://github.com/hasanaliqureshi/A-Frame-VR-Development/blob/master/A-Frame-VR-Development-Part-1.html

Virtual Reality Pakistan Medium Publication : https://medium.com/vr-pakistan

Virtual Realiy Pakistan Facebook Group : https://www.facebook.com/groups/VirtualRealityPK/

Originally published at hasanali.me on October 10, 2018.




Virtual Reality Community in Pakistan

Recommended from Medium

How to install an SSL Certificate on BigCommerce?

21 days of Code with Code Warriors — Day 13

Ulord Project Progress(From February 10, 2022 to February 16, 2022)

Python for beginners

Use Docker to Run K9s to Manage a Kubernetes Cluster

Unlearn programming to learn Ruby

First 5 things to start learning PyTorch Tensors in Sagemaker Notebooks

Learn Python as I learn

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hasan Ali

Hasan Ali

Founder of Retina VR | Love to write ❤

More from Medium

When a Existing App didn’t Run on Android

Learn to deploy Links in an Application using Huawei App Linking

Push notifications on android

Why Use Flutter For Mobile App Development? | Hyperlink InfoSystem