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

Posted 2021-05-02

我在相机周围有一堆元素。

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

当他们被点击时，我正在动态地向这些实体添加一个实体（一个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

如何使所有新按钮显示在面向相机的实体的右下角？

答案

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

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

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

另一答案

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