3. Entity-Component Architecture

This is a series on using WebXR to build immersive content. To access the other blogs in the series, follow this link.

Let us understand this with an example.

Imagine you want to build a car entity by assembling components. We’ll need 3 components:

1. “engine” component with properties like horsepower, torque.
2. “material” component with properties like color, design.
3. “tire” component with properties like steering angle.

In Aframe, an entity is built like this:

<a-entity geometry="primitive: sphere; radius: 1.5"
         light="type: point; color: white; intensity: 2"
         material="color: white; shader: flat; src: glow.jpg"
         position="0 0 -5"></a-entity>

• Entities are represented by the <a-entity> element.
• Components are represented by HTML attributes on <a-entity>. We have 4 components in the code snippet above: geometry, light, material, position.
• Each component has its own set of properties and property values. For e.g, primitive and radius are the properties for geometry component with values sphere and 1.5 respectively.

There are 3 ways to bring components into your project:

1. Directly use core components of Aframe in your code. You can find the list of core components in the documentation of Aframe.
2. You can also register your own custom components. We’ll learn how to do this in the next blog.
3. You can use the publicly available 3rd party components. There are a host of available options:

• Aframe Registry
• npm’s search
• There are multiple Github projects you can find online.

See you in the next one.

YoungSphere crowdsources immersive content for K12 education. Contribute your AR/VR content at www.youngsphere.com to earn monetary credits.