I am currently utilizing Three.js to exhibit a 3D model that allows users to manipulate the camera by dragging and click on objects to zoom in. However, I am encountering an issue where the system registers a click and drag as a click, triggering the animation unintentionally. I am in need of a solution to prevent clicks from being registered during dragging, ensuring they are only recognized as clicks when there is no mouse movement involved.
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==="Tree006") {
var object = intersects[0].object;
gsap.to( camera.position, {
duration: 1,
x: mesh["Tree006"].position.x,
y: mesh["Tree006"].position.y,
z: mesh["Tree006"].position.z,
onUpdate: function() {
controls.enabled = false;
camera.lookAt(0,0,0);
}
} );
console.log( 'Intersection:', intersects[ 0 ] );
}
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: 6,
onUpdate: function() {
controls.enabled = true;
camera.lookAt( 0,0,0 );
}
} );
}
}