Mouse click in wrong location

Can you try it with this (JS) code instead:

function onClick(event) {

    const rect = renderer.domElement.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    mouse.x = ( x / canvas.clientWidth ) *  2 - 1;
    mouse.y = ( y / canvas.clientHeight) * - 2 + 1

    this.perspectiveCamera.updateMatrixWorld();
    this.raycaster.setFromCamera( mouse, this.perspectiveCamera );

}

It will respect the relative position of the canvas in your HTML document.

6 Likes