How to prevent click when 'dragging' the camera with the left mouse button

How can I prevent click after ‘dragging’ the camera using the left mouse button? I am using map controls and I have some camera animations that are triggered when the user clicks an object, currently when you click and drag the canvas to move the camera on the x and z axes, when you let go of the mouse button, left click is triggered. I need to prevent the left click if the user drags.

function onClick(event) {
	event.preventDefault();

	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

	raycaster.setFromCamera( mouse, camera );

	var intersects = raycaster.intersectObjects( scene.children, true );

	if ( intersects.length > 0 && intersects[0].object.name==="Object1") {
        var object = intersects[0].object;
        zoomInTimeline(mesh["Object1"].position.x, mesh["Object1"].position.y, mesh["Object1"].position.z, 5);
	}

Have you considered to maintain a variable dragging in your application? When MapControls transforms the camera, you set it to true. Otherwise to false. You can then evaluate the variable in your click event handler and only execute your logic when dragging is false.

2 Likes

Thanks, this certainly makes sense but I’m not entirely sure how to make this work. It’s currently 40 degrees where I am so my brain is running at 50%…Will come back to this next week once its cooled down and see if I can figure it out.

So I created a ‘dragged’ variable and created a nested if statement but it does not work as intended:

var mesh=[];

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2()

function onClick(event) {
	event.preventDefault();

	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

	raycaster.setFromCamera( mouse, camera );

	var intersects = raycaster.intersectObjects( scene.children, true );

    var dragged = false
    window.addEventListener('mousedown', function () { dragged = false })
    window.addEventListener('mousemove', function () { dragged = true })
    window.addEventListener('mouseup', function() {
        if (dragged == true) { return }
        //Click Tree006 to focus
	if ( intersects.length > 0 && intersects[0].object.name==="Tree006") {
        var object = intersects[0].object;
        zoomInTimeline(mesh["Tree006"].position.x, mesh["Tree006"].position.y, mesh["Tree006"].position.z, 5);

    console.log( 'Intersection:', intersects[ 0 ] );
	}

    //Click anywhere outside of object to leave focus
    if ( intersects.length > 0 && intersects[0].object.name!=="Tree006") {
        var object = intersects[0].object;
	    gsap.to( camera.position, {
            duration: 1, // seconds
            x: 6,
            y: 4,
            z: 4,
            onUpdate: function() {
                controls.enabled = true;
                // controls.enableRotate = true;
                
            }
        } );
	}

    //Click object to focus
	if ( intersects.length > 0 && intersects[0].object.name==="Tree001") {
        var object = intersects[0].object;
        zoomInTimeline(mesh["Tree001"].position.x, mesh["Tree001"].position.y, mesh["Tree001"].position.z, 5);
	
    console.log( 'Intersection:', intersects[ 0 ] );
	}

    //Click anywhere outside of object to leave focus
    if ( intersects.length > 0 && intersects[0].object.name!=="Tree001") {
        var object = intersects[0].object;
	    gsap.to( camera.position, {
            duration: 1, // seconds
            x: 6,
            y: 4,
            z: 4,
            onUpdate: function() {
                controls.enabled = true;
                // controls.enableRotate = true;
                
            }
        } );
	}
})
}