# Mouse click in wrong location

**URL:** <https://discourse.threejs.org/t/mouse-click-in-wrong-location/10507>\
**Category:** Questions\
**Tags:** raycasting\
**Created:** [October 29, 2019, 10:29am UTC](https://discourse.threejs.org/t/mouse-click-in-wrong-location/10507 "2019-10-29T10:29:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 29, 2019, 10:29am UTC](https://discourse.threejs.org/t/mouse-click-in-wrong-location/10507/1 "2019-10-29T10:29:59Z")

</div>

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);
}

```

> **[GrimZero/ConfiguratorAngular](https://github.com/GrimZero/ConfiguratorAngular)**
>
> Contribute to GrimZero/ConfiguratorAngular development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 29, 2019, 10:39am UTC](https://discourse.threejs.org/t/mouse-click-in-wrong-location/10507/2 "2019-10-29T10:39:47Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 29, 2019, 11:00am UTC](https://discourse.threejs.org/t/mouse-click-in-wrong-location/10507/3 "2019-10-29T11:00:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![imkuldeepahlawat](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/imkuldeepahlawat/32/43089_2.png) [@imkuldeepahlawat](https://discourse.threejs.org/u/imkuldeepahlawat)\
**Post date:** [February 6, 2024, 4:33am UTC](https://discourse.threejs.org/t/mouse-click-in-wrong-location/10507/4 "2024-02-06T04:33:41Z")

</div>

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