Grouping
As you start to create more complicated scenes in A-Frame, you will want to group entities to make scaling or animating them easier.
To group entities, you just need to wrap them in an entity, and then apply all of your animations to the wrapper entity.
Here’s an example arcade joystick:
<a-entity scale=".25 .25 .25">
<a-entity id="stick">
<!--
The ball on the top of the joystick
-->
<a-sphere
radius="1.8"
position="0 6 0"
color="#d00"
></a-sphere>
<!-- the metal pole of the joystick -->
<a-cylinder
height="5.5"
radius=".5"
color="#999"
position="0 2.5 0"
></a-cylinder>
<!-- this controls the animation of the "stick" entity -->
<a-animation
attribute="rotation"
to="15 0 -15"
from="-15 0 15"
repeat="indefinite"
fill="forwards"
direction="alternate"
></a-animation>
</a-entity>
<!--
the base ring of the joystick, this doesn't need to animate
so it's outside of the "stick" entity
-->
<a-cylinder
height=".25"
radius="2.4"
color="#222"
position="0 0 0"
></a-cylinder>
</a-entity>