Mouse click in wrong location

Questions
1

For my project I need some buttons on the side of my window. So I changed the size of the window. However, I need to be able to select objects in the scene by clicking on them, which is misbehaving.
I suspect it to have something to do with this function while I suspect it has to do with transformation of the mouse position to select the object:

    private onMouseMove = (event: { clientX: number; clientY: number; }) => {
    const mouse: THREE.Vector2 = new THREE.Vector2((event.clientX / window.innerWidth) * 2 - 1,
        - (event.clientY / window.innerHeight) * 2 + 1);

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

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
3

That was what I was looking for. couldnt find the actual code to get it to work. Thank you.

4

im using transform controls, before transformation of model using transform controls, i can get exact location where i want to put the axis dragger, but after i transformed when i get the location of onclick , it will give me => onlick location + the location i transformed the model,i try to update the matrix of the scene and model and control;s also,using orthographic camera