aFrame rotating text - aframe

Question

I am trying to put a text next to an object then rotate it by 90 degrees. Below is the portion of the code I used.
<a-sphere
color="green"
look-at="[gps-camera]"
scale="0.49205916205718183 0.49205916205718183 0.49205916205718183"
gps-entity-place="latitude: 3.xxxxx; longitude: 101.xxxxx;">
<a-text
look-at="[gps-camera]"
value="Point 1"
color="yellow"
rotation="0 90 0"
scale="7, 7"
position="-2.5 4 0"
z-offset="3"
faceUser: true;>
</a-text></a-sphere>
<a-sphere
The result is this:
What I want to achieve is this (please ignore the background):
I tried to change all the values in this expression but nothing happens:
rotation="0 90 0"

Answer 1

To rotate only the text element (like on the image), you need to change the roll (rotation="0 0 90"):
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-text color="black" value="some Text" position="-0.5 0.5 -3" rotation="0 0 90"></a-text>
</a-scene>
To rotate the element around the sphere, you should rotate the sphere, not the text (provided the text is the child element). Click the sphere to see the result:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
this.el.addEventListener("click", () => {
// rotate by 90 degrees when clicked
let rot = this.el.getAttribute("rotation")
rot.z += 90
this.el.setAttribute("rotation", rot)
})
}
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-sphere">
<a-sphere position="0 1.5 -3" radius="0.25" color="#EF2D5E" foo>
<a-text color="black" value="some Text" position="-0.5 0.5 0"></a-text>
</a-sphere>
</a-scene>
I recommend debugging the scene in pure a-frame.