three.js - 如何停用 Three.js 中的 DragControls？

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 and 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);

希望对您有所帮助!