Как отключить DragControls в Three.js? - PullRequest
Новая
       19

Как отключить DragControls в Three.js?

0 голосов
/ 07 января 2019

Я бы хотел остановить работу 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();
    }
}

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Решение: 

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();
    }
}
0 голосов
/ 07 января 2019

Похоже, что элементы управления имеют функции 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);

Надеюсь, это поможет!

...