0

Im trying to use a global variable called _mouseoverdistancebool in my constructor to notice when the mouse is over an object 3D called distance in threejs. But the value never changes. This is the code that affects the variable:

  constructor(targetMesh, controls, camera, container) {
    super();

    this._mouseoverdistancebool = false;

    this.addEventListeners();
  }

  addEventListeners() {
    this._distance.addEventListener('mouseleave', this.mouseleavedistance);
    this._distance.addEventListener('mouseenter', this.mouseenterdistance);

    this._container.addEventListener('mousewheel', this.onMove);
    this._container.addEventListener('DOMMouseScroll', this.onMove);

  }

  mouseenterdistance(evt) {
    console.log("Mouse over the object!!!");
    this._mouseoverdistancebool = true;
  }

  mouseleavedistance(evt) {
    console.log("Mouse leaves the object....");
    this._mouseoverdistancebool = false;
  }

  onMove(evt) {
    console.log(this._mouseoverdistancebool);
  }

So I can see in the debug that the events work well but the boolean is always false. Something like this:

>Mouse over the object!!!
>false
>Mouse leaves the object....
>false

Im new to constructors in javascript ... What Im doing wrong?

Rashomon
  • 5,962
  • 4
  • 29
  • 67
  • You can look into this feature - [transform class properties](https://www.npmjs.com/package/babel-plugin-transform-class-properties). Which would allow you to do `onMove = (evt)=>{...}` and you should get the correct this in the callback – pailhead Apr 24 '17 at 17:04
  • Solved with the duplicate question. thanks! – Rashomon Apr 24 '17 at 17:11

0 Answers0