Offset between mouseposition and raycast intersection

Questions
1

I like to implement some length measurement by selecting 2 points on objects and using raycasting to get the points.

The basics are working but i have a annoying offset between real mouseposition and the shown intersection. This picture explain it the best:

Screenshot_20210421_215305
Screenshot_20210421_2153051920×977 179 KB

This is my code (the comments are tried without success):

function onPointerMove(event) {
//    var rect = webglRenderer.domElement.getBoundingClientRect();
//    pointer.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
//    pointer.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
//    pointer.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
//    pointer.x = ( event.offsetX / webglRenderer.domElement.width ) * 2 - 1;
//    pointer.y = -( event.offsetY / webglRenderer.domElement.height ) * 2 + 1;
//    var rect = webglRenderer.domElement.getBoundingClientRect();
//    pointer.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1;
//    pointer.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
//    raycaster.params.Line.threshold = 0.01;
//    raycaster.params.Points.threshold = 0.01;
//    var size = webglRenderer.getSize();
//    pointer.x = ( event.offsetX / webglRenderer.domElement.width ) * 2 - 1;
//    pointer.y = - ( event.offsetY / webglRenderer.domElement.height ) * 2 + 1;
//    var canvasPosition = webglRenderer.domElement.getBoundingClientRect();
//
//    var mouseX = event.offsetX - canvasPosition.left;
//    var mouseY = event.offsetY - canvasPosition.top;
//
//    pointer = new THREE.Vector2(
//            2 * (mouseX / webglRenderer.domElement.width) - 1,
//            1 - 2 * (mouseY / webglRenderer.domElement.height));
    var rect = webglRenderer.domElement.getBoundingClientRect();
    pointer.x = ( ( event.clientX - rect.left ) / ( rect. right - rect.left ) ) * 2 - 1;
    pointer.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
    raycaster.setFromCamera(pointer, camera);

    var intersects = raycaster.intersectObjects(objects, true);

    if (intersects.length > 0) {
        var intersect = intersects[ 0 ];
        rollOverMesh.position.copy(intersect.point).add(intersect.face.normal);
    }

    render();
}

some more style infos:

webglRenderer.domElement.style.position = "relative";
webglRenderer.domElement.className = "viewer";

<body>
        <div class="container-fluid main-wrapper">
            <div id="viewer">
            </div>
       </div>
</body>

.main-wrapper {
height: 100vh;
width: 100vw;
padding-left: 0 !important;
padding-right: 0 !important;
}

.viewer{
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:1;
position: absolute;
}

2

Have you tried doing a raycast from a dummy object that has a slightly different position relative to the camera?

3

im not sure what you mean with raycast “from” but it doesnt matter what kind of objects i take:

Screenshot_20210425_175019
Screenshot_20210425_1750191920×977 138 KB
Screenshot_20210425_175045
Screenshot_20210425_1750451920×977 139 KB
Screenshot_20210425_175121
Screenshot_20210425_1751211920×977 139 KB

4

I have done some testing, and for me the ray cast point is positioned at the point of the mouse cursor. It is however off when the canvas is not completely covering the screen.
(in my case the use of the Css3DRenderer caused setting a ‘perspective’ style element, causing some white space next to the canvas).

5

Have you checked if the values of rect are correct?
Which element is triggering the pointermove event? The canvas?

As far as I can tell your canvas covers the hole screen right? Then this should actually work

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

Hi, did you find any solution? I am facing the same issue but in AR, tried all possible methods. Even my canvas is covering the entire screen/camera.

7

hi
this is to fix mouse coord when the renderer (and its canvas) has a lower size then fullwidth

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

I think could solve

2 Likes