Как найти позицию маркера в AFrame с помощью JavaScript? - PullRequest
Новая
       10

Как найти позицию маркера в AFrame с помощью JavaScript?

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

Я использую камеру и маркеры штрих-кода.Чтобы моя пушка стреляла, мне нужно создать сферу при нажатии.Я пытался определить положение маркера с помощью .getAttribute ('position') , но я получаю неутешительные результаты, например, null и [object, object].Есть ли реальный способ получить доступ к координатам маркера в AFrame?Пока что он создает сферу, но прямо в камере, потому что не может найти местоположение маркера.

Javascript 

var sceneEl = document.querySelector('a-scene'); //select scene
    var markerEl = document.querySelector('#cannonMarker');
  // trigger event when button is pressed.
  document.addEventListener("click", function (e) {

    var pos = markerEl.getAttribute('position');
    var Sphere = document.createElement('a-sphere');



    Sphere.setAttribute('dynamic-body', {
    shape: 'sphere',
    mass: 4
    });

    Sphere.setAttribute('position', pos);




    sceneEl.appendChild(Sphere);

    console.log('Sphere coordinates:' + pos);



 });

1 Ответ

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

При условии, что маркер распознается и ссылки верны 

markerEl.getAttribute('position')

должен возвращать текущую позицию маркера.

Если ваш скрипт находится в элементе <head>,маркер может еще не существовать при выполнении кода.

Хорошая идея поместить ваш код в компонентный кадр:

HTML: 

<a-scene ball-spawner></a-scene>

js: 

AFRAME.registerComponent('ball-spawner', {
  init: function() {
  // your code here - the scene should be ready
  }
})

Я сделал небольшое изменение в вашем коде ( рабочий глюк здесь ): 
var sceneEl = document.querySelector('a-scene'); //select scene
var markerEl = document.querySelector('a-marker');
// trigger event when button is pressed.
sceneEl.addEventListener("click", function (e) {
   if (markerEl.object3D.visible === false) {
     return;
   }
   var pos = markerEl.getAttribute('position');
   var Sphere = document.createElement('a-sphere');
   Sphere.setAttribute('radius', 0.5)
   Sphere.setAttribute('dynamic-body', {
      shape: 'sphere',
      mass: 4
   });
   Sphere.setAttribute('position', pos);
   sceneEl.appendChild(Sphere);
   });
  }

Когда маркер выходит из поля зрения, его позиция «запоминается последней».Так что это то же самое место на экране.Вот почему есть return, если элемент маркера не виден.

Кажется, он работает так, как вы хотите, поскольку шарик выпадает из прозрачного прямоугольника на маркере (прямоугольник - хороший способубедитесь, что маркер распознан):

enter image description here

...