title: can the three.js EventDispatcher be used to communicate between classes?
body: <h3>Core question</h3>
  
  <p>An event emitted on one class that supports EventDispatcher doesn't get picked up by another class that supports EventDispatcher. </p>
  
  <p>How do I get the communication working app-wide so that I can pass messages around? </p>
  
  <p>At the moment it seems that it only supports passing a message to its own class.</p>
  
  <h3>Background</h3>
  
  <p>I'm using this boilerplate which gives me three.js and es6:</p>
  
  <p><a href="https://github.com/paulmg/ThreeJS-Webpack-ES6-Boilerplate" rel="nofollow noreferrer">https://github.com/paulmg/ThreeJS-Webpack-ES6-Boilerplate</a></p>
  
  <p>I've updated the packages manually to use three.js r97.</p>
  
  <p>I'm looking at the EventDispatcher class and I'm thinking this is a clean way for me to pass messages around the system while keeping it decoupled. For example, I have some HTML UI that watches a checkbox.</p>
  
  <p>Trimmed down to the core example, I have interaction.js:</p>
  
  <pre><code>import {EventDispatcher} from 'three';
  
  // Manages all input interactions
  export default class Interaction {
    constructor() {
      // Add event dispatcher support
      Object.assign( this, EventDispatcher.prototype );
  
      // setup the trigger for the event
      let outer = this;
      $("#" + Config.uiElements.boxOpenStateId).change(function() {
        console.log("event emitting");
        outer.dispatchEvent( { type: 'boxOpenStateToggled', message: { isChecked: "example" } } );
        console.log("event emitted");
      });
  
      // setup a event listener
      this.addEventListener( 'boxOpenStateToggled', function ( event ) {
        console.log("event caught in Interaction.js", event);
      });
    }
  }
  </code></pre>
  
  <p>And I have boxmanager.js (trimmed down to the core bits):</p>
  
  <pre><code>import {EventDispatcher} from 'three';
  
  export default class BoxManager {
      constructor() {
          // Add event dispatcher support
          Object.assign( this, EventDispatcher.prototype );
      }
  
      setupBoxes(manager) {
          console.log("adding event listener on BoxManager.js");
          this.addEventListener( 'boxOpenStateToggled', function ( event ) {
              console.log("event caught by BoxManager.js", event);        
          } );
      }
  }
  </code></pre>
  
  <p>When I trigger the <code>boxOpenStateToggled</code> event on <code>Interaction</code> the <code>BoxManager</code> event listener doesn't capture it.</p>
  
  <p>I get a console log like this:</p>
  
  <pre><code>adding event listener on BoxManager.js
  adding event listener on Interaction.js
  
  (I trigger the event)
  
  event emitting
  event caught in Interaction.js {type: "boxOpenStateToggled", message: {…}, target: Interaction}
  event emitted
  </code></pre>
  
  <p>What I was expecting here was to see "event caught in BoxManager" as well - is it a system-wide event dispatcher? Or can it only dispatch events internally on a per-class basis?</p>
  
  <h3>Showing my working</h3>
  
  <p>I wasn't sure if it was the way I was using it with so I have tried:</p>
  
  <ul>
  <li><p>using the <code>extends</code> keyword on the class to give the <code>EventDispatcher</code> functionality and it works but only within the class.</p></li>
  <li><p>using the <code>.call</code> version initially which was in an earlier release of three.js.</p></li>
  </ul>
  
  <p>I can't find any real discussion or examples of using EventDispatcher or see where it is even used in the library. </p>
  
  <p>Have I misunderstood its purpose? Am I using it wrong?</p>