How does A-Frame work?
A-Frame
What is A-Frame?
A-Frame is a web framework for building 3D/AR/VR experiences. It allows you to construct 3D interactive worlds using only HTML. You can use JS to extend many of the features that A-Frame has to offer.
Experience these 3D worlds using a wide variety of platforms: Quest, Rift, Windows Mixed Reality, SteamVR, Mobile and Desktop.
A-Frame can easily be embedded into your own HMTL documents, such as the example below. Click and drag your mouse within the frame below to look around the 3D scene. If you are viewing this on mobile, you may even be able to tilt your screen to look around instead.
A-Frame offers many different accessible ways for users to interact with the content. All of these methods are either built-in or more likely that not already developed by other passionate community members. Users can:
- Use a mouse and keyboard to interact with the experience
- Use a mobile device by tilting it around
- Use a mobile device in AR mode, by projecting the scene into real-world space using your device’s camera
- Use a VR headset that’s plugged in, and look around using your own eyes.
A-Frame aims to provide a toolkit that allows developers to create content that can be easily shared and experienced on a number of different platforms.
And the best part about this is that it is absolutely free! Developing with it also requires no additional software to be installed. Instead, we link our HTML document to the main A-Frame Javascript, and this allows us to then use A-Frame specific HTML tags. Such as:
<a-box> </a-box>
<a-entity> </a-entity>
Why learn A-Frame
A-Frame is an excellent toolkit for developing 3D interactive worlds. Additionally, it is also a simple toolkit to learn how to use as it can be programmed using HTML style tags entirely. This makes it a lot more accessible for experimenting with AR and VR experiences.
The future of these technologies are also slowly becoming more and more intertwined with one another. XR is the term given to all of these technologies working together. It is the combination of AR (Augmented Reality), VR (Virtual Reality), and MR (Mixed Reality).
A-Frame allows us to create and learn about digital content that can be used in these different realities. It also gives us context on how we design certain experiences so that they can be used with a number of different devices.
Key concepts of A-Frame
A-Frame uses what called an entity-component system or ECS for short. We will explore this concept further in a later lesson. What an ECS allows us to do however is to create unique and individual objects.
Lets say we created two cubes:
<a-box id="Cube1"> </a-box>
<a-box id="Cube2"> </a-box>
Though the cubes are created from the same base object (The basic information for a cube that A-Frame has stored), each cube can be manipulated individually from one other.
<a-box id="Cube1" position = "2, 2, 5"> </a-box>
<a-box id="Cube2" scale = "0.5, 0.5, 0.5"> </a-box>
A-Frame gives you the ability to dynamically create or alter your own entities. To begin with, it might be easier to use basic entities first before exploring further, such as: a box, sphere or cylinder.
You can also use:
<a-box><a-cone><a-cylinder><a-dodecahedron><a-icosahedron><a-plane><a-ring><a-sphere><a-torus>
To create new objects follows a very similar process to using HTML elements. It requires you to have both an opening <a-box> and closing </a-box> tag. As you may have noticed from the naming convention, almost all A-Frame elements use a 'a-' in front of their names. This helps us understand which elements are used for the website and which elements are used for the 3D experience.
But where would we place these A-Frame elements?
Much like how most HTML elements are placed within the <body> and </body> tags, A-Frame also uses a similar method. We use the tag <a-scene> and</a-scene> to define the part of the document that will be used to create our 3D experience.
Again, similar to HTML, we can edit the attributes of A-Frame elements. These elements however have much more attributes and properties for us to manipulate or even add. By default, each object has the attributes:
- Position (x, y, z)
- Rotation (x, y, z)
- Scale (x, y, z)
Each of these requires 3 numbers for each of the axis. This allows us to manipulate the 3D object and place, rotate and scale it to match our needs.
This is a quick introduction to help us better understand the following lessons. We have lessons dedicated to teaching and exploring some of the concepts mentioned above.
The best way we find in learning is to have hands on experience. Head onto the next lesson to start creating your very own 3D experience and even view it in AR & VR.
A Beginner’s Guide to Creating a VR Experience
A Beginner’s Guide to Creating a VR Experience
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.
