A-Frame is an open source framework by mozilla VR team for creating VR scenes using html like markup on web. You don’t require advanced math skills or knowledge of low level WebGL API to come up with a cool VR scene. Simple declarative syntax is all you need to learn.
It is capable of doing what Three.js can do. It works on desktop, Android, iOS, the Oculus rift and the HTC Vive.
I’ll be coming up with a series of posts to understand three.js, a-frame and sharing my experiences with VR and Web in general.
Let’s get started!
Essentially a-frame brings the entity-component system to the DOM (Document Object Model). If you have used three.js, whatever you add to THREE.Scene() is an entity. We can attach components to entity to add any appearance, behavior and functionality.
Here <a-entity> is a primitive and geometry, material are its components. Some components are built in a-frame, others you can create of your own. In addition you can also use components created by open source contributors.
Nested entities follow a parent-child relationship with each other. Child entities are affected by behavior and functionality of their parents (child entities do not inherit parent attributes rather apply some transformations based on them). This is particularly helpful when we need to apply particular behavior to whole set of entities.
Let’s dive into some code.
Example – Rubik’s Cube
First we need to download latest a-frame development build. Here is a basic skeleton to get started
Let’s add a camera to the <a-scene>
Here camera denotes a component with look-controls and wasd-controls. We can also add camera using <a-camera> primitive.
Add the text entity to the scene
Now let’s define multicolored-cube component
AFRAME.registerComponent() as the name suggests is used to register a component. It can be used with multiple entities. We need this component to set colors to the cube’s faces. We can get the data passed to the component using this.data.propertyName. getObject3D is used to access THREE.Object3D properties. You can debug the code to see what other properties are available to this object.
Now we’ll be using Jade templating engine to create multiple cubes for our rubik’s cube. The idea is to create 27 cubes positioned in the right manner to create one entity as a whole.
Add the templating script to the <a-assets> which is an asset-management-system to preload assets required by the scene (Must be inside <a-scene>). Also we need to compile the jade template to html markup before rendering the scene.
Here multiple entities are added as siblings of one another. Note that they are not at all nested. All that above for loops are doing is to create entities with different x, y, z coordinates for position. Also script tag has its type attribute set to “text/x-jade-template”. It is necessary to make sure component knows which templating engine to use.
Now let’s add this whole script as a source to an entity
An entity is created with the src attribute set to the script tag id so that it can be parsed and appended to the current entity.
You can use your favorite VR device to view this scene or if you don’t have one I would suggest Google Cardboard which is an awesome piece of tech for VR to reach masses. Here is the source code. You can also take a look at the demo.
I’ll be coming back with some awesome a-frame stuff.