Как отключить DragControls в Three.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();
    }
}