javascript - 尝试更改其模式时，THREE.TransformControls未定义

我正在使用TransformControls程序包（在此处找到https://github.com/lucascassiano/three-transform-controls）。转换控件的功能似乎或多或少都很好，但是它在我的应用程序中引起了两个主要问题：

1）它不会将模式更改为旋转/缩放/等。当被调用时，它给出以下错误：“未捕获的TypeError：无法读取未定义的属性'setMode'”。

2）在我的屏幕上，它显示了一个非常奇怪的红线，还有小玩意儿（请参见附件的屏幕截图）。
both of the problems on one picture

看来问题出在变量的范围之内，但我找不到它。

export default {
name: 'ThreeTest',
data() {
  return {
    mouse: new THREE.Vector2(),
    rayCaster: new THREE.Raycaster(),
    spheres: [],
    objects: [],
    intersectsPoi: null,
    transformControls: null
  };
},
methods: {
  init() {

    this.transformControls = new TransformControls(this.camera, this.renderer.domElement );


    // EVENT LISTENERS:
    map.addEventListener('mousedown', this.transformPoi, false);

    this.transformControls.addEventListener( 'change', this.render );
    this.transformControls.addEventListener( 'dragging-changed', function ( event ) {
      this.controls.enabled = ! event.value;
    } );

    window.addEventListener( 'keydown', function ( event ) {
      switch ( event.keyCode ) {
        case 81: // Q
          this.transformControls.setSpace( this.transformControls.space === "local" ? "world" : "local" );
          break;
        case 17: // Ctrl
          this.transformControls.setTranslationSnap( 100 );
          this.transformControls.setRotationSnap( THREE.Math.degToRad( 15 ) );
          break;
        case 87: // W
          this.transformControls.setMode( "translate" );
          break;
        case 69: // E
          this.transformControls.setMode( "rotate" );
          break;
        case 82: // R
          this.transformControls.setMode( "scale" );
          break;
        case 187:
        case 107: // +, =, num+
          this.transformControls.setSize( this.transformControls.size + 0.1 );
          break;
        case 189:
        case 109: // -, _, num-
          this.transformControls.setSize( Math.max( this.transformControls.size - 0.1, 0.1 ) );
          break;
        case 88: // X
          this.transformControls.showX = ! this.transformControls.showX;
          break;
        case 89: // Y
          this.transformControls.showY = ! this.transformControls.showY;
          break;
        case 90: // Z
          this.transformControls.showZ = ! this.transformControls.showZ;
          break;
        case 32: // Spacebar
          this.transformControls.enabled = ! this.transformControls.enabled;
          break;
      }
    } );

  },

  // HELPER FUNCTIONS:

  mouseOverScene (event) {
    event.preventDefault();
    let rect = event.target.getBoundingClientRect();
    let x = event.clientX - rect.left;
    let y = event.clientY - rect.top;

    this.mouse.x = ( x / this.mapWidth) * 2 - 1;
    this.mouse.y = - ( y / this.mapHeight ) * 2 + 1;

    this.rayCaster.setFromCamera(this.mouse, this.camera);
  },


  transformPoi (event) {
    console.log('I am in');
    if (event) {
      this.mouseOverScene(event);
    };

    let intersectsPoi = this.intersectsPoi;
    intersectsPoi = this.rayCaster.intersectObjects(this.spheres);
    console.log(intersectsPoi);
    let selected;

    if (intersectsPoi.length > 0 ) {
      selected = intersectsPoi[0].object;
      console.log(`The intersected is ${selected}`);
      this.transformControls.attach( selected );
      this.scene.add(this.transformControls);
    } else {
      this.transformControls.detach( selected );
      this.scene.remove(this.transformControls);
    };
  },

}

预期的结果：因此，应通过按相关的键来更改transformControls的模式。

实际结果：嗯，它没有做到:(

最佳答案

我猜想this存在问题（“未捕获的TypeError：无法读取未定义的属性'setMode'”。）：

 window.addEventListener( 'keydown', function ( event ) {

   // here this might be not what you want.
   // this refers to window,
   // but window doesn't have transformControls
   console.log(this)
 });

arrow function允许this从其父函数继承。在这种情况下，this将引用具有transformControls属性的对象：

window.addEventListener( 'keydown', event => {

});