如何在 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);

希望对您有所帮助！

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();
    }
}

如何在 Three.js 中停用 DragControls？

How to deactivate DragControls in Three.js?

three.js

drag-and-drop

addeventlistener

removeeventlistener