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