如何解决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
中调试场景。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。