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

Question

我正在为 VR 使用 A-Frame，我正在寻找一种方法将第二个实体固定在所有其他 A-Frame 实体的顶部，如下图中的黑色菱形：

我有两个主要挑战：

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

老实说，我想在屏幕上的每个实体顶部重新创建一个可见的指示器，例如看门狗 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>

直播fiddlehere.

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>

直播fiddlehere

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

How to create a indicator on top of each entity using A-Frame for VR?

javascript

web

virtual-reality

aframe