Detection with raycaster not completely accurate when the width of div is reduced, three.js(v72)

Question

here is my code for calculating the intersection:

var wallWidth = 1200;
var wallHeight = 500;
var containerWidth=1200,containerHeight=700; //div 
//camera
camera = new THREE.PerspectiveCamera(60, containerWidth/containerHeight, 1, 10000);
camera.position.set(0, -wallHeight / 2 + 10, wallWidth);

here is my function which intersect with object on mouse move

function onDocumentMouseMove(event) {

        mouse.x = ( event.clientX / containerWidth ) * 2 - 1;
        mouse.y = -( event.clientY / containerHeight ) * 2 + 1;

        var deltaX = event.clientX - mouseX;
        var deltaY = event.clientY - mouseY;

        raycaster.setFromCamera(mouse, camera);
        var intersects = raycaster.intersectObjects(interactiveObj, true);

        if (intersects.length > 0) {
            //interaction with object
        }

        render();
    }

It is working correctly, i.e i am getting the value in intersects object when the width of the div is 100%, but when i reduce the div size to 80% then the object is not picking up correctly, i.e it pick the object when the mouse is quite far from object.

Answer 1

use below code for chnage your mouse vector

function onDocumentMouseMove(event) {

    mouse.x = ( (event.clientX -renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1;
    mouse.y = -( (event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height ) * 2 + 1;

    var deltaX = event.clientX - mouseX;
    var deltaY = event.clientY - mouseY;

    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(interactiveObj, true);

}