Entity Component System in aframe

Aframe, the VR development library from Mozilla uses Entity Component System pattern. In this post, we’re going to look more into what entity component system in aframe is and how it affects the development experience.

Aframe

We’ve talked previously about how to get started in aframe. Aframe makes it easy to develop in VR. It is a wrapper over threejs making easy for even newcomers to get started in VR. It doesn’t stop you from developing more sophisticated components later on with threejs either. That’s what makes it great.

Entity component system

Entity component system has three parts.

• Entity
• Component
• System

We’re going to see each of this in detail.

Entity

Entity is a general purpose object that does and renders nothing. It just acts as a wrapper.

In its basic form, it does nothing. We can attach components to it to make it more useful. For example, we can give it a shape by connecting a geometry component.

We can access entity by using DOM APIs.

Once we retrieve an entity via DOM API, we can access its properties. Let’s look at the available properties of the entity.

Components
It gives access to all the components of the entity.

isPlaying

Checks whether the entity is active and playing.

object3DMap

It gives access to THREE.Object3D of the entity. For example, for an entity with geometry and light components attached, object3DMap can look like this.

sceneEl

It is the reference to the scene element of the entity. a-scene is used to represent the scene.

Component

The Component is the reusable module that can be used with entities to give it properties such as appearance and behavior. Components are built using threejs and JavaScript code. They make it easy to create modules that can be called from HTML. Component names represent HTML attributes, and the value of attributes represent the data.

Let’s look at a simple component in aframe, the position component.

You’d use the position component as follows.

Position component is an example for single property component.

Single property component

Single property component can represent data by a single value.

Multi property component

Multi-property component can represent data by several properties and values. When written in HTML, they resemble inline CSS properties.

Creating aframe components

You might be wondering how to create aframe components. AFRAME.registerComponent can be used to register new components.

Registering a component requires a component name. Then we define the schema and the lifecycle methods of the components. To see how to register a component, let’s look at the position component that we checked earlier.

In the position component, the schema is vec3 which gives the position component a {x, y, z} object.

Components also has properties and methods.

You can also specify dependencies for your components. For example, if your component requires another component for it to work properly then you can specify it as a dependency. It ensures that the dependency components will be initialized before your the current component.

Multiple instance components

Usually, the components can only have one instance in a scene. For example, an entity can only have one geometry component. But some components can have multiple instances. For example, sound component.

The component definition of a multiple instancing component requires multiple: true in the component definition.

System

The System provides a global scope, services, and management for the components.

A system can be accessed by the scene element and can access the components interface.

Registering and using a system

Registering a system is similar to registering a component. It uses registerComponent instead of registerSystem.

If the name of the system matches the name of the component, the component can access the system within the component as this.system.

Why use a system to manage components

• Separation of logic and data: System helps you to separate logic and data if needed. With this pattern, components only worry about managing data through the lifecycle methods, while the system will handle the logic.
• Gather all components: One common pattern to manage multiple components with a system is by registering the component with a system. The system can then have references to all its components.

Using Entity Component System in aframe

This article was a basic introduction to Entity Component System (ECS) pattern used by aframe. Understanding this pattern will help you to build VR components and working VR apps with aframe.

If you have any questions, suggestions on how to improve the content, don’t forget to leave a comment below.