javascript - 如何使用 VR 的 A-Frame 在每个实体顶部创建一个指示器？

Question

我正在使用 A 型框架进行 VR，并且正在寻找一种方法将第二个实体固定在所有其他 A 型框架实体的顶部，如下图中的黑色菱形:

我有两个主要挑战:

• 自动放置钻石:我可以将其作为子项相对于其父项放置，但我需要自己管理父项的大小以确保子项不在父项内
• 旋转钻石，使其每时每刻都垂直于用户 View 。

说实话，我想重新创建一个在屏幕上每个实体顶部可见的指示器，例如看门狗 2(在示例中，汽车顶部的菱形是白色的)。

我认为使用 A-Frame 不容易做到这一点，我想知道我是否需要自己编写代码，或者是否有什么可以帮助我。

提前谢谢

Answer 1

我将尽力关注所谓的主要挑战:

2) 旋转指示器。您可以使用 Ngo Kevin 的 look-at组件，它旋转实体以面对任何给定的实体。

示例:

  <a-box position="-1 0.5 -3" look-at="#player" color="#4CC3D9"></a-box>
  <a-camera id="player" position="0 1.6 0"></a-camera>

现场 fiddle here .

<小时/>

1) 放置在实体上方。我会使用bounding boxes以确定高度。然后创建钻石，将其放置在物体高度上方约 0.2 处。并设置任何其他属性( Material 、src、文本)

示例:

AFRAME.registerComponent("foo", {
 init: function() {
    var object = this.el.getObject3D('mesh');
    var bbox = new THREE.Box3().setFromObject(object);
    var position = {x:0, y: bbox.max.y + 0.2, z:0}
    var diamond = document.createElement("a-box")
    diamond.setAttribute("color", "green")
    diamond.setAttribute("width", "0.1")
    diamond.setAttribute("height", "0.1")
    diamond.setAttribute("depth", "0.1")
    diamond.setAttribute("position", position)
    diamond.setAttribute("look-at", "#player")
    this.el.appendChild(diamond)
  }
})

<a-box foo></a-box>

现场 fiddle here