aFrame 旋转文本

问题描述

我正在尝试在对象旁边放置一个文本，然后将其旋转 90 度。下面是我使用的部分代码。

  <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

结果如下：

我想要实现的是这个（请忽略背景）：

我尝试更改此表达式中的所有值，但没有任何反应：

rotation="0 90 0"

解决方法

要仅旋转文本元素（如图像上），您需要更改滚动 (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>

要围绕球体旋转元素，您应该旋转球体，而不是文本（前提是文本是子元素）。点击球体查看结果：

<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>

---

我建议在纯 a-frame 中调试场景。