如何在Three.js中停用DragControls？ [英] How to deactivate DragControls in Three.js?

问题描述

取消复选框后，我想停止DragControls功能。我尝试使用removeEventListener，但似乎无法正常工作。您知道如何停用DragControls吗？

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

推荐答案

它看起来控件具有 <$在它们上执行c $ c> activate 和 deactivate 函数可以添加和删除所有事件，听起来像您要找的东西

It looks like the controls have an activate and deactivate function on them that add and remove all the events, which sounds like what you're looking for:

// 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中不起作用，因为您每次调用这些函数时都会创建新的函数句柄。相反，您只想创建一个函数，并在添加或删除侦听器时使用相同的引用。

Another thing to note in your code is that the way you are adding and removing events will not work in Javascript because you are creating new function handles every time you call those functions. Instead you want to create a function once and use the same reference when adding or removing listeners.

function dragEndCallback(event) {
    // ...
}

dragControls.addEventListener('dragEnd', dragEndCallback);
dragControls.removeEventListener('dragEnd', dragEndCallback);

希望有帮助！

这篇关于如何在Three.js中停用DragControls？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！