时间戳

首页 > 解决方案 > THREE.JS：如何在元素组上激活 dragControls 后禁用它们？

javascript - THREE.JS：如何在元素组上激活 dragControls 后禁用它们？

问题描述

我有一个激活拖动控件的功能，同时按下“m”键。出于某种原因，当“m”未按下时，它不会被停用。如何禁用拖动控件？

如果语句为真，我试图封装要激活的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”时，它们应该返回不可拖动状态，并且轨道控件再次启用。

实际：上述所有情况都会发生，但在“m”未按下后对象仍可拖动。显然启用了 orbitControls，这使得屏幕上发生了整个下一个级别的 haywireness。

标签： javascriptthree.js

解决方案

未经测试，但您应该尝试在 onDocumentKeyUp 结束时调用 movePoi 函数。乍一看，似乎只有在单击鼠标左键时才验证是否按下了“m”，而不是在未按下“m”键时进行。希望有帮助。

推荐阅读