THREE.JS: Как я могу отключить dragControls после активации их на группе элементов?

Question

У меня есть функция, которая активирует dragControls, пока нажата клавиша "m". По какой-то причине он не деактивируется, когда "m" не нажата. Как я могу отключить dragControls?

Я попытался инкапсулировать dragControls для активации, если утверждение верно, иначе dragControls = null. Но всякий раз, когда происходит первая активация, она не деактивируется, даже если утверждение ложно. Циклы while и do while просто замораживают браузер.

  init() {
  // EVENT LISTENERS:
  map.addEventListener('mousedown', this.movePoi, false);
  document.addEventListener('keydown', this.onDocumentKeyDown, false);
  document.addEventListener('keyup', this.onDocumentKeyUp, false);

},

// HELPER FUNCTIONS:
onDocumentKeyDown(event) {

  let keycode = event.which;
  if (keycode === 77) {
    this.moveIt = true;
    this.controls.enabled = false;
    console.log("Key is pressed");
    console.log(this.moveIt);
  }
},
onDocumentKeyUp(event){
  let keycode = event.which;
  console.log(keycode);
  if (keycode === 77) {
    this.moveIt = false;
    this.controls.enabled = true;
    console.log("Key is unpressed");
    console.log(this.moveIt);
  }
},
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);
},

//POI movement around the scene:

movePoi (event) {

  event.preventDefault();
  let controlsDrag;
  if (this.moveIt) {
  controlsDrag = new DragControls(this.spheres, this.camera, this.renderer.domElement);

  } else {
    controlsDrag = null;
  }
}

ОЖИДАЕМЫЕ: объекты должны перетаскиваться левой кнопкой мыши, в то время как клавиша "m" нажата (orbitControls также отключаются, когда это происходит. Эта часть работает нормально). Когда буква "m" не нажата, они должны возвращать состояние без возможности восстановления, и функции orbitControls снова включаются.

АКТУАЛЬНО: Все вышеперечисленное происходит, НО объекты по-прежнему можно перетаскивать после того, как "m" не нажата. Очевидно, что orbitControls включен, что выводит на экран весь следующий уровень сшивки.

Answer 1

Таким образом, решение выглядит следующим образом:

  init() {
  
        this.controlsDrag  = new DragControls(this.spheres, this.camera, this.renderer.domElement);
      this.controlsDrag.deactivate();
      
  // EVENT LISTENERS:
  
      map.addEventListener('mousedown', this.startMovePoi, false);
      this.controlsDrag.addEventListener('mouseup', this.stopMovePoi,false);
},

//POI movement around the scene:
    startMovePoi () {
      let controls = this.controls;
      this.controlsDrag.activate();
      this.controlsDrag.addEventListener('dragstart', function () {
        controls.enabled = false;
      });
      this.controlsDrag.addEventListener('dragend', function () {
        controls.enabled = true;
      });
    },
    
    
    stopMovePoi(){
      this.controlsDrag.deactivate();
    }

Требовался некоторый рефакторинг кода раньше.

Answer 2

Не проверено, но вы должны попытаться вызвать функцию movePoi в конце onDocumentKeyUp. На первый взгляд кажется, что проверка того, нажата ли кнопка "m" или нет, выполняется только при нажатии левой кнопки мыши, а не при нажатии клавиши "m". Надеюсь, это поможет.