3

I would like to stop DragControls functionality after checkbox deselection. I try to use removeEventListener, but it seems not to be working. Do you have any idea how to deactivate 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();
    }
}
4

2 回答 2

3

看起来控件上有一个activateanddeactivate函数，可以添加和删除所有事件，这听起来像你正在寻找的东西：

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

希望有帮助！

于 2019-01-07T07:38:09.830 回答
1

解决方案：

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();
    }
}
于 2019-01-07T18:04:46.330 回答