Home / Questions / 454458
Accepted
Nicolas Oñate
Asked: 2022-05-25 02:31:14 +0800 CST 2022-05-25 02:31:14 +0800 CST

Wrong mouse position capture

  • 772

I have a 3D animation in which I want to detect collisions between objects, for this I have generated a ball that makes contact with the other objects, but it is not in the same position as the mouse.

functional example

This is the conflicting function copied from here but it hasn't worked for me.

// Follows the mouse event
function onMouseMove(event) {

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

    // Make the sphere follow the mouse
    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
    vector.unproject(camera);
    var dir = vector.sub(camera.position).normalize();
    var distance = - camera.position.z / dir.z;
    var pos = camera.position.clone().add(dir.multiplyScalar(distance));
    sphereInter.position.copy(pos);

    // Make the sphere follow the mouse
    sphereInter.position.set(event.clientX, event.clientY, 0);
}

As you can see the sphere does not move to the same position as the mouse

How can I solve that?

javascript

1 Answers

  1. Best Answer

    You have to add the event mousemoveto renderer.domElementinside documentand then use this code to calculate the components of mouse:

    const rect = renderer.domElement.getBoundingClientRect();

mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
    • 2