Search code examples
javascriptwebaframevirtual-reality

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

I am using A-Frame for VR and I am looking for a way to pin a second entity on the top of all other A-Frame entities like the black diamond in the image below:

enter image description here

I have 2 main challenges:

  • place automatically the diamond: I am able to place it relatively to its parent as a child but I need to manage myself the size of the parent to be sure the child is not inside the parent
  • rotated the diamong in order to get it perpendicular to the user view at every moment.

To be honest, I would like to recreate a indicator visible on top of each entity on the screen like in watch dog 2 for example (in the example the diamond is white on the top of the car).

enter image description here

I don't see any easy to do it with A-Frame and I would like to know if I need to code it by myself or if there is something that could help me.

Thank you in advance

Solution

  • I'll try to focus on the so called main challenges:

    2) Rotating the indicator. You can use Ngo Kevin's look-at component, which rotates an entity to face any given entity.

    Example:

      <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>

    Live fiddle here.

    1) Placing above the entity. I'd use bounding boxes to determine the height. Then create your diamond, place the it about 0.2 above the objects height. and set any other attributes (material, src, text)

    Example:

    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>

    live fiddle here