three.js orbit control with raycaster

Question

I`m using three.js. To move around in my scene I am using orbit control and to select my objects I use the raycaster. The Raycaster is sent on click, as well as the orbit control. So if an object is selected and i move the camera around on mouse release, another object will be selected. Is there a way to check for camera movement in orbit control.

Or what is the common way to prevent unwanted selection?

Here is my selection handler:

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
}

thanks

So, if I understand correctly. You select an object with left click and also move the camera with left click. Is that right? — Juan Ferrer
Yes thats right. I could check for camera change between mouse down and mouse release to achieve that, because, the selection is triggered on mouse release, but i was hoping for a method within orbit control. — tinytree

Juan Ferrer Juan Ferrer · Accepted Answer · 2017-07-17T09:23:20

Flags might come handy here. You could prevent the selection from happening if the mouse is moved. Something like:

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

three.js orbit control with raycaster

1 Answers