Detection with raycaster is not completely accurate when the width of the div decreases, 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 that traverses an object with mouse movement

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 works correctly, i.e. I get the value in the intersection object when the div width is 100%, but when I reduce the div size to 80%, then the object does not fit correctly, i.e. selects an object when the mouse is far from the object.

Answer 1

use the code below for 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);

}

Answer 2

Instead of using, event.clientX - renderer.domElement.offsetLeftyou can simply useevent.offsetX

, Brakebein , .

Answer 3

.

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