Question

相机周围有很多元素。

所有元素都设置为查看相机。

点击它们时，我会动态地将实体添加到我想要显示在右下角的这些实体（UI按钮）。

当相机朝向某个方向时，这是正确的，但当相机朝向另一个方向时，新实体将放置在物体的错误一侧。

这是我的功能

const bbox = new three.Box3().setFromObject(this.el.object3D)

this.scale = this.button(this.icons.scale,'scale')
this.scale.setAttribute('position',{x:bbox.max.x/2,y:-bbox.max.y/2,z:0})
},


button:function(iconCode,id){
const button = document.createElement('a-entity')
const geometry = {width : 0.5, height: 0.5}

button.setAttribute('look-at','[camera]')
button.setAttribute('draw',draw)
button.setAttribute('hotspot-admin-handle',icon)
this.el.appendChild(button)

return button

如何让所有新按钮显示在摄像机正对面的右下角？

Answer 1

如果您的按钮是实体的子项，则可以将其相对于父实体定位，例如

button.setAttribute("position", "0 0 1");

会将您的按钮放在父实体前面，更靠近相机。您可以使用x，y和z坐标将实体定位在其父级的右下角。 确保将'z'坐标设置为大于0，以确保它在父母面前可见。

Answer 2

问题与边界框尺寸有关。当我使用简单值时，子实体按预期定位。我已经硬编码了如何，并且必须找到另一种计算相对于父母大小的位置的方法。

aframe动态添加元素位置是错误的

2 个答案: