如何在三.js中停用拖动控件

Question

我想在取消选择复选框后停止DragControls功能。我尝试使用removeEventListener，但它似乎不起作用。你知道吗 如何停用DragControls ？

let dragControls;
function dragControlsStart() {
    dragControls.addEventListener('dragstart', function (event) {
        controls.enabled = false;
    });
    dragControls.addEventListener('dragend', function (event) {
        controls.enabled = true;
    });
}
function dragControlsStop() {
    dragControls.removeEventListener('dragstart', function (event) {
        controls.enabled = false;
    });
    dragControls.removeEventListener('dragend', function (event) {
        controls.enabled = true;
    });
}
function dragAndDropActivate() {
    let checkBox = document.getElementById("dragAndDropCheckbox");
    dragControls = new THREE.DragControls(meshes, camera, renderer.domElement);
    if (checkBox.checked == true) {
        dragControlsStart();
    } 
    else if (checkBox.checked == false) {
        dragControlsStop();
    }
}

Answer 1

看起来控件上有一个activate和deactivate功能，可以添加和删除所有事件，这听起来像您要查找的内容：

// create drag controls once and activate or deactivate 
const dragControls = new THREE.DragControls(meshes, camera, renderer.domElement);
function dragAndDropActivate() {
    let checkBox = document.getElementById("dragAndDropCheckbox");
    if (checkBox.checked == true) {
        dragControls.activate();
    } 
    else if (checkBox.checked == false) {
        dragControls.deactivate();
    }
}

代码中需要注意的另一件事是，添加和删除事件的方式在Javascript不起作用，因为每次调用这些函数时都会创建新的函数句柄。相反，您希望创建一个函数一次，并在添加或删除侦听器时使用相同的引用。

function dragEndCallback(event) {
    // ...
}
dragControls.addEventListener('dragEnd', dragEndCallback);
dragControls.removeEventListener('dragEnd', dragEndCallback);

希望对您有所帮助！

Answer 2

解决方案：

let dragControls = new THREE.DragControls(ArrayOfMesh, camera, renderer.domElement);
dragControls.addEventListener('dragstart', function (event) {
    controls.enabled = false;
});
dragControls.addEventListener('dragend', function (event) {
    controls.enabled = true;
});
dragControls.deactivate();

function dragAndDropActivate() {
    let checkBox = document.getElementById("dragAndDropCheckbox");
    if (checkBox.checked == true) {
        dragControls.activate();
    } 
    else if (checkBox.checked == false) {
        dragControls.deactivate();
    }
}