A-Frame works with entities (
<a-entity> tag). An entity is a placeholder, you can add appearance, behavior, and functionality as well as position, rotation and scale components. Somehow, entities are comparable with layers in Photoshop or Illustrator.
It is possible to define objects, such as boxes, cones, cylinders etc. as entities (
<a-entity> tag) or as primitives ( (
<a-box> tag for example to define a box).
It is possible to build anything with entities (and even importing external 3D models). The basic shapes (such as boxes, cylinders, cones etc.) can be described as entities or as primitives.
Create a box as primitive
Example of a box as primitive:
<a-box id="box" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
The structure is quite simple. Please have a look at the zip file. We need the following steps:
- We need a
<a-scene>first. The scene is the global root object, and all entities or primitives are contained within the scene.
- Within the
<a-scene>all primitives are placed. We have to define some attributes (like position, color, rotation and id)
position="-1 0.5 -3"
rotation="0 45 0"
The id helps to identity the object in the inspector (which you can open both on Mac and Windows with
Create a box with entities
Example of a box as entity:
<a-entity id="box" position="-1 0.5 -3" rotation="0 45 0" geometry="primitive:box" material="color:#4CC3D9"></a-entity>
The attributes are quite similar as above and explained in the next topics. Please have a look at the zip file.