EventListeners not working with A-Frame parented entity

Question

I'm trying to do one of the most simple things ever, add event listeners to an element in A-Frame. However, I'm new to A-Frame and running into a lot of issues. It's not even that the code isn't rotating the object on mousedown, it's that no clicks are being registered through the console. I figured it may have something to do with the fact that the "fishing-logic" component is added to a parent whose position is (0,0,0) while the part of the model I'm trying to click has a position of (0, 1, -3) but even when I add the "fishing-logic" component to the it still doesn't register clicks. Can anyone help me understand what I'm doing wrong?

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/[email protected]/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>

crin · Accepted Answer · 2019-03-21 22:24:31Z

The issue is that because fishing-logic is on a parent a-entity to the a-gtlf-model, it needed an "interactable" query selector/class for the raycaster. This can be seen in the code snippet below. I then added the interactable component alongside the fishing-logic component in the a-entity and clicks are now being registered.

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'))
        );
      });
    }
});

Collectives™ on Stack Overflow

EventListeners not working with A-Frame parented entity

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related