问如何在Three.js中停用DragControls？
EN

Stack Overflow用户

提问于 2019-01-07 00:41:20

回答 2查看 1K关注 0票数 3

我想在取消选中复选框后停止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();
    }
}

three.js

drag-and-drop

addeventlistener

removeeventlistener

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-01-07 07:38:10

看起来这些控件上有一个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);

希望这能有所帮助！

票数 3

Stack Overflow用户

发布于 2019-01-07 18:04:46

解决方案：

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