a-frame + ionic addEventlistener не регистрирует события щелчка, несмотря на использование слитного курсора

Привет, я пытаюсь реализовать a-frame на ionic (+ angular-meteor) фреймворке и столкнулся с простой ошибкой. Когда мой курсор заканчивает слияние, не зарегистрировано событие щелчка.

Вот код кадра:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Whatsapp Meteor</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js">
  </script>
</head>

<body>
    <a-scene>
      <a-entity camera look-controls>
        <a-cursor id="cursor"a-frame fuse='true' fuseTimeout="1000">
            <a-animation begin="click" easing="ease-in" attribute="scale"
               fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
            <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
               fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
        </a-cursor>
      </a-entity>
      <a-entity id="cube" geometry="primitive: box" material="color: blue"
                position="0 -1 -5">
      </a-entity>   
    </a-scene>
     <script>
      console.log('addEventListener script was ran');
      document.querySelector('#cube').addEventListener('click', function () {
            console.log('I was clicked!');
        this.setAttribute('material', 'color', 'red');
      });
    </script> 
</body>

А вот скриншот, показывающий слияние + отсутствие зарегистрированного события click.

Кто-нибудь успешно внедрил ionic+aframe (желательно на angular-meteor) и может помочь?


person KyleT    schedule 26.01.2017    source источник
comment
обновление: также попытался поместить тот же код кадра в новое приложение ionic1. такая же проблема. Интересно, проводила ли команда a-frame какое-либо тестирование с интеграцией ионов?   -  person KyleT    schedule 05.02.2017
comment
@ngokevin Вы знаете, выполнила ли команда a-frame интеграцию Ionic?   -  person KyleT    schedule 10.02.2017


Ответы (2)


https://aframe.io/docs/0.4.0/guides/writing-a-component.html

Обратите внимание, что компоненты должны быть определены до <a-scene>

Зарегистрируйте компонент перед его использованием.

person ngokevin    schedule 26.01.2017

ОП пытался использовать аппаратную мышь, чтобы вызвать щелчок. В WebGL обнаружение щелчка мыши не так просто, как 2D-страница. Если вы хотите обнаружить фактическое нажатие мыши на объект, вам нужно создать raycaster. Вот компонент, который сделает это за вас: https://www.npmjs.com/package/aframe-mouse-cursor-component

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

person ngokevin    schedule 26.01.2017
comment
Привет, я пытался использовать курсор на основе взгляда, чтобы вызвать щелчок, но он не работает. Изменил вопрос с новым кодом. - person KyleT; 05.02.2017
comment
Кроме того, протестирован компонент курсора мыши для запуска щелчка. Все равно не работает в ionic. - person KyleT; 05.02.2017