aFrame rotating text

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.