Как создать индикатор поверх каждого объекта, используя A-Frame для VR? - PullRequest
Новая
       20

Как создать индикатор поверх каждого объекта, используя A-Frame для VR?

0 голосов
/ 08 мая 2018

Я использую A-Frame для VR, и я ищу способ закрепить второй объект поверх всех других объектов A-Frame, таких как черный ромб на изображении ниже:

enter image description here

У меня есть 2 основные проблемы:

  • автоматически разместить ромб: я могу разместить его относительно его родителя, как ребенка, но мне нужно управлять размером родителя, чтобы убедиться, что ребенок не находится внутри родителя
  • повернул алмаз, чтобы он был перпендикулярен пользователю в любой момент.

Если честно, я бы хотел воссоздать индикатор, видимый в верхней части каждой сущности на экране, как, например, в сторожевой собаке 2 (в примере ромб белый на верхней части автомобиля).

enter image description here

Я не вижу ничего легкого сделать это с A-Frame, и я хотел бы знать, нужно ли мне кодировать это самостоятельно или есть что-то, что могло бы мне помочь.

Заранее спасибо

1 Ответ

0 голосов
/ 08 мая 2018

Я постараюсь сосредоточиться на так называемых основных задачах:

2) Вращение индикатора. Вы можете использовать look-at компонент Ngo Kevin, который поворачивает сущность, чтобы повернуться лицом к любой данной сущности.

Пример: 

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

Живая скрипка здесь .

1) Размещение над объектом. Я бы использовал ограничивающие рамки , чтобы определить высоту. Затем создайте свой бриллиант, поместите его примерно на 0.2 выше высоты объектов. и установите любые другие атрибуты (материал, источник, текст)

Пример: 

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>

живая скрипка здесь

...