AR.js пытается синхронизировать сцену с компасом на север - PullRequest
0 голосов
/ 24 ноября 2018

Я настраиваю дополненную реальность с помощью AR.js и пытаюсь настроить камеру / сцену на север при загрузке страницы.

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

До сих пор у меня это работало в определенной степени, но калибровка кажется немного неправильнойраз.Я использую MEAN-стек и AR.js

Вот что у меня есть:

view.html:

<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
  <a-entity id="camera-entity" wasd-controls-enabled="false" position="0 -2 0" rotation="0 0 0" aframe-injected="">
    <a-camera></a-camera>
  </a-entity>
  <a-text font="kelsonsans" width="6" position="0 0 -3.5" rotation="0 0 0" text="" value="North"></a-text>
</a-scene>

угловой клиентский контроллер (этот раздел выполняется только один разпри инициализации):

var compass = event.webkitCompassHeading;
document.querySelector('#camera-entity').object3D.rotation.y = THREE.Math.degToRad(-compassdir);

Я делаю что-то неправильно с тем, как я устанавливаю вращение на объекте камеры?Есть лучший способ сделать это?Какие-либо предложения?

У меня выводится компасный подшипник на дисплей разработки, и кажется, что аппаратное обеспечение правильно получает показания компаса.

Аппаратное обеспечение: iPhone X

Ссылка: см. Такжедля справки о том, как кадр ориентируется на относительную позицию телефона при открытии: https://github.com/aframevr/aframe/issues/349 И это для справки о повороте a-frame: https://aframe.io/docs/0.8.0/components/rotation.html

1 Ответ

0 голосов
/ 25 ноября 2018

Если вы хотите, чтобы ваши предметы на маркере были ориентированы по компасу, то я бы предложил повернуть сцену, не мешая с камерой

<a-marker>
  <a-entity id='parent' rotate-this-with-the-compass-readings>
    <!-- Everything you want to rotate northwise --!>
  </a-entity
</a-marker>

Желательно, чтобы с рамочным компонентом былоуверен, что элемент готов:

AFRAME.registerComponent("rotate-this-with-the-compass-readings", {
  init: function() {
      var compassdir // however you get the compass reading
      var pos = this.el.getAttribute('position')
      pos.y = THREE.Math.degToRad(-compassdir);
      this.el.setAttribute('position', pos)
  }
})
...