EventListeners не работают с парентной сущностью A-Frame - PullRequest
Новая
       24

EventListeners не работают с парентной сущностью A-Frame

0 голосов
/ 21 марта 2019

Я пытаюсь сделать одно из самых простых дел - добавить слушатели событий в элемент в A-Frame.Тем не менее, я новичок в A-Frame и сталкиваюсь с множеством проблем.Дело даже не в том, что код не вращает объект в mousedown, а в том, что через консоль регистрируются нет кликов.Я подумал, что это может быть связано с тем фактом, что компонент "рыболовная логика" добавляется к родителю, позиция которого (0,0,0), в то время как часть модели, которую я пытаюсь щелкнуть, имеет позицию(0, 1, -3), но даже когда я добавляю компонент "fishing-logic", он все равно не регистрирует щелчки.Может кто-нибудь помочь мне понять, что я делаю не так? 

AFRAME.registerComponent('fishing-logic', {
    init: function() {
      var el = this.el;
      var isDragging = false;
      
       el.addEventListener('mouseenter', function() { 
         console.log("Calling mouse enter!");
       });
      el.addEventListener('mouseleave', function() { 
        console.log("Calling mouse leave!");
       });
      el.addEventListener('mousedown', function(evt) {
        console.log("Calling mouse down!");
        isDragging = true;
        
        if(this.isDragging){
          el.object3D.rotation.x += Math.PI;
        }
      });
      el.addEventListener('mouseup', function(evt) {
        console.log("Calling mouse up!");
      });
    }
});
<!DOCTYPE html>
<html lang="en">

    <head>
        <title>A-Frame Starter</title>
        <meta name="description" content="Base Project">

      <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
      <script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script> 
      <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>  
      <script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v3.3.0/dist/aframe-physics-system.min.js"></script>
      
      <script src="script.js"></script>

    </head>

    <body>
        <a-scene>
          
        <a-assets><a-asset-item id="fishing_pole" src="assets/Fishing_Pole_01.gltf"></a-assets>
          
          <a-entity fishing-logic>
             <a-gltf-model src="#fishing_pole" 
                            position="0 1 -3"
                            rotation="0 0 0"
                        scale="0.1 0.1 0.1"></a-gltf-model>
          <a-entity line="start: 0, 3.3, -2.9; end:0 0 -5; color: white"></a-entity>
          </a-entity>

            <a-sky color="#111133"></a-sky>
                      
            <a-plane rotation="-90 0 0" color="#000011" width="64" height="64" depth="64" shadow></a-plane>
        </a-scene>
        
        <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
        <script src="https://button.glitch.me/button.js"></script>
    </body>

</html>

1 Ответ

0 голосов
/ 22 марта 2019

Проблема в том, что поскольку рыболовная логика находится на родительской a-сущности к a-gtlf-модели, ей нужен «интерактивный» селектор / класс запросов для raycaster. Это можно увидеть в фрагменте кода ниже. Затем я добавил интерактивный компонент рядом с компонентом рыболовной логики в a-сущности, и теперь регистрируются клики. 

AFRAME.registerComponent('interactable', {
  
    init() {
      let el = this.el;
      let originalColor = el.getAttribute('material').color; 
       el.addEventListener('raycaster-intersected', function() { 
          el.setAttribute('material', 'color', '#24CAFF');
       });
      el.addEventListener('raycaster-intersected-cleared', function() { 
          el.setAttribute('material', 'color', originalColor);
       });
      
      el.addEventListener('mousedown', function() {
        el.body.applyImpulse(
          new CANNON.Vec3(0, 3, 0),
          new CANNON.Vec3().copy(el.getAttribute('position'))
        );
      });
    }
});
...