three.js 使用 raycaster 进行轨道控制答案

【问题标题】：three.js orbit control with raycasterthree.js 使用 raycaster 进行轨道控制
【发布时间】：2017-07-17 17:23:20
【问题描述】：

我正在使用three.js。为了在我的场景中移动，我使用了轨道控制并选择我的对象，我使用了光线投射器。 Raycaster 在点击时发送，以及轨道控制。因此，如果选择了一个对象并且我在释放鼠标时移动相机，则会选择另一个对象。有没有办法检查轨道控制中的相机运动。

或者防止不必要的选择的常用方法是什么？

这是我的选择处理程序：

function onMouseClick( event ) {

    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components
    mouse.x = ( event.clientX / canvasWidth) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    // update the picking ray with the camera and mouse position
    raycaster.setFromCamera( mouse, camera );

    // calculate objects intersecting the picking ray
    var intersects = raycaster.intersectObjects( CentroLite.children, true );
    if (intersects.length === 0){
    intersects = raycaster.intersectObjects( millingTable.children, true );
    }

    SELECTED = intersects[0].object;
    // DO SOMETHING
}

谢谢

【问题讨论】：

所以，如果我理解正确的话。您通过左键单击选择一个对象，并通过左键单击移动相机。对吗？
是的，没错。我可以检查鼠标按下和释放鼠标之间的相机变化来实现这一点，因为选择是在鼠标释放时触发的，但我希望有一个轨道控制内的方法。

标签： javascript three.js

【解决方案1】：

标志在这里可能会派上用场。如果鼠标移动，您可以阻止选择发生。比如：

var doClickOnRelease = false;

document.onmousedown = function() {
    // Get ready to see if the user wants to select something
    doClickOnRelease = true
};

document.onmouseup = function() {
    if (doClickOnRelease) {
        // Your select function
    };

document.onmousemove = function() {
    // Since you're dragging, that must be because you
    // didn't intend to select something in the first place
    doClickOnRelease = false;
};

【讨论】：