Somewhat related to this question, I can't seem to find an 'in-framework' way to change the rotational axis for an A-Frame object (like Earth's tilted axis, for example).
The linked question refers to changing the rotation pivot point by wrapping the object in a parent entity which will offset the child entity (see below):
<a-entity rotation="0 45 0"> <!-- Parent entity -->
<a-box position="0 1 0"></a-box> <!-- Child entity -->
</a-entity>
I've adopted a similar method but rather than offset the pivot point, I've tried to change the rotation axis. When adding an animation to the parent, the rotation is always along the global Y-axis, rather than the local (parent's) rotated Y-axis:
<a-entity rotation="0 0 25"> <!-- Parent entity -->
<a-animation
attribute="rotation"
easing="linear"
dur="60000"
to="0 360 0"
repeat="indefinite">
</a-animation> <!-- Animates parent -->
<a-box position="0 0 0></a-box> <!-- Child entity -->
<a-entity rotation="0 0 25">
Does anyone know how best to change the axis from global- to local-space, or if there's a way to animate around a tilted axis?
I think you can add an additional parent entity around everything and rotate that.
<a-entity> <!-- Grandparent entity -->
<a-animation
attribute="rotation"
easing="linear"
dur="60000"
to="0 360 0"
repeat="indefinite">
</a-animation>
<a-entity rotation="0 0 25"> <!-- Parent entity -->
<a-box position="0 0 0"></a-box> <!-- Child entity -->
</a-entity>
</a-entity>
Open the A-Frame Inspector (ctrl + alt + i) and play with the rotation to see which way you want to rotate.