In the past, I’ve written several tutorials on using Three.js for creating 3D scenes. Three.js is a fantastic library that abstracts out all of the messiness of WebGL and allows the developer to focus on creating 3D scenes. So what is A-Frame and why use it?
Be sure to visit the A-Frame website for lots of good information including documentation, examples, and general design principles.
So how simple can it really be? The answer is really, really simple, but in order to truly appreciate that, we need to go back and look at the progression from native WebGL to Three.js to A-Frame. To do this, we are going to compare the simplest of scenes, an animated cube, written in each of the three frameworks.
Now let’s walk through the steps need to create the same spinning blue cube using A-Frame. To get started, go ahead and create a new html file. Open that file in any text editor and paste in the following code:
<title>Introduction to A-Frame</title>
<a-light type="directional" color="#ffffff" position="0 1 1"></a-light>
<a-box color="#0033ff" width="10" height="10" depth="10" position="0 0 -40">
<a-animation attribute="rotation" repeat="indefinite" to="360 360 0" dur="3000" easing="linear"></a-animation>
And we’re done.
There is no step 2. That’s it. 15 lines of HTML and we’ve created the same thing that took 400+ lines of code written in native WebGL, and 50+ lines of code using Three.js. Not only that, but 9 of those 15 lines of code are boilerplate HTML stuff that’s needed just so the browser recognizes it as a web page. Let’s take a look at those other 6 lines to see what’s going on.
As I stated before, under the hood, A-Frame is using Three.js to build and run our scene, but A-Frame has taken the abstraction to another level by building all of that functionality into handy little HTML elements. To create this scene, I used four different elements: a-scene, a-light, a-box, and a-animation.
The first element used is the a-scene element. Every element you add must be contained within this element. Adding the a-scene element does more than just add a container for you to define the rest of your scene. In fact, when going from Three.js to A-Frame, this simple element is what allowed us to eliminate so much of the code from our Three.js example. You may have noticed that we didn’t need to define a canvas or a renderer, we didn’t have to attach our renderer to any HTML elements, we don’t need to worry about the requestAnimationFrame, and we didn’t even need to define a camera. This is because that simple element does all of that for us. We could also remove the a-light element from our scene. That’s because the default setting for the a-scene element is to include a camera, ambient light, and one directional light unless one is explicitly defined.
I didn’t like the default lighting so I added the a-light element. Once a light element is defined, A-Frame will remove the default lighting setup and only use what you have defined. The a-light element has many properties that can be set to tweak the lighting to get the desired effect. A few of the more important ones to be aware of are: type, color, and intensity. Type allows you to define which type of light you want to use: ambient, directional, hemisphere, point, and spot. Color obviously allows you to set the color of the light, and intensity allows you to define the overall brightness of the light. For more information on the different types of lighting, check out my post on WebGL and Three.js Lighting.
The a-box element does exactly what you would think it does. It adds a box to the scene allowing us to set its initial width, height, depth, and location. We could also set its initial rotation by adding the rotation property to the element.
The a-animation element, like the a-scene element, is deceptively simple. The animation element can be added to any entity within the scene, and can be used to animate virtually any property of that entity. Not only that, but you can add as many a-animation elements as you want to create complex animations.
To demonstrate, add the following line as a child of the a-box element:
<a-animation attribute="position" repeat="indefinite" direction="alternate" from="-20 0 -40" to="20 0 -40" dur="3000" easing="linear"></a-animation>
What you should see when you refresh your browser is our cube spinning and bouncing from side to side.
Taking a look at the a-animation element you can see that we set the attribute property to be ‘position’. This tells the animation what property of the parent is to be animated. We set repeat to be ‘indefinite’ so this animation will go on forever. We set the ‘from’ and ‘to’ properties to the start and end positions of the animation. The direction property is set to ‘alternate’, telling A-Frame to alternate between the ‘from’ and ‘to’ positions every other animation. We’ve set the dur property to ‘3000’ which tells A-Frame this animation should take 3 seconds, and A-Frame allows us to define a wide range of easing functions to be used for the animation.
A-Frame is a new framework by the people from Mozilla that manages to take Three.js and simplify it even more. In this tutorial, I tried to cover the very basics of what is going on under the covers with A-Frame, but it does so much that it can’t possibly be covered in one single blog post. Stay tuned for more…