09 Jun A-Frame 101: How To Start Developing WebVR Content Right Now
If you want to start developing WebVr content, but don’t know where to start, perhaps it’s time to look at A-Frame.
A-Frame is easy and efficient, and a powerful tool for beginner’s to begin developing WebVR content. A-Frame is open source (Mozilla developed) and is built upon HTML to make it convenient for web developers and graphics designers to explore WebVR.
The most unique feature of A-Frame is the Entity-Component-System (ECS) architecture, giving it a structure to three.js, making it extensible, declarative and highly flexible.
A variety of VR headsets like HTC Vive, Google DayDream, Google Cardboard, and Samsung GearVR are supported by A-Frame. In Virtuleap WebVR Hackathon, nine out of the ten winning projects used A-Frame.
The Entity-Component Framework of A-Frame
*Code examples leave out the opening and closing ‘<>‘ so the plain text will appear in article. Instead, single quotes ” are used.
The A-Frame documentation defines the core ECS terms as follows:
A basic definition of ECS involves:
• Entities are container objects into which components can be attached. Entities are the base of all objects in the scene. Without components, entities neither do nor render anything, similar to empty ‘div’ container’s.
• Components are reusable modules or data containers that can be attached to entities to provide appearance, behavior, and/or functionality. Components are like plug-and-play for objects. All logic is implemented through components, and we define different types of objects by mixing, matching, and configuring components. Like alchemy!
• Systems provide global scope, management, and services for classes of components. Systems are often optional, but we can use them to separate logic and data; systems handle the logic, components act as data containers.
In simple words, Entity is like a real-world object, say, a box, a cylinder, a light source (bulb), a car, a tree, a mountain or a VR controller. Now, to render this object and make it functional, we will attach components to the given entity. Thus, components are like different attributes and characteristics associated with the object that defines its appearance, functionality and behavior.
For a simple entity, say box, we can have different components like material, color, position, scale, rotation, light, shadow, etc. Without components, the entities have a void existence. So it is important to define necessary components for a given entity to render it successfully on the screen.
The A-Frame Syntax:
In A-Frame, the entities are represented using the
Every entity in A-Frame is attached with an “id” attribute to retrieve it using DOM API. For example:
In the demo, the different entities like scene, mixins, light and animation are used.
‘a-scene’ handles all the three.js and WebVR boilerplate to setup canvas, renderer, default camera, light, WebVR Polyfill and UI to call WebVR API.
In A-Frame, Component holds the data. Component is represented by the HTML attribute and the component data is represented by the values of those attributes. The different components used in the demo are camera, light, rotation, scaling, color, position, intensity, material, geometry, height, depth, radius, direction, etc. There are single and multi-property components in A-Frame.
‘a-box’, ‘a-assets’, ‘a-light’, ‘a-mixin’, ‘a-curvedimage’, ‘a-grid’, ‘a-plane’, ‘a-sky’, ‘a-animation’, ‘a-camera’ are the different primitives that implemented in the demo. These primitives are defined inside a scene and can be cascaded in different entities.
DEMO SOURCE CODE: