# TransformControls have a pointer offset

**URL:** https://discourse.threejs.org/t/transformcontrols-have-a-pointer-offset/45951
**Category:** Questions
**Tags:** transform-controls
**Created:** [December 19, 2022, 2:22pm UTC](https://discourse.threejs.org/t/transformcontrols-have-a-pointer-offset/45951 "2022-12-19T14:22:12Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)
#### Post date: [December 19, 2022, 2:22pm UTC](https://discourse.threejs.org/t/transformcontrols-have-a-pointer-offset/45951/1 "2022-12-19T14:22:12Z")

</div>

I’m using Transform Controls and my canvas is inside a grid element.

the original `getPointer` function returns

```javascript

return {
	x: ( event.clientX - rect.left ) / rect.width * 2 - 1,
	y: - ( event.clientY - rect.top ) / rect.height * 2 + 1,
	button: event.button
};

```

also I’ve tried

```javascript
return ( {
	x: ((event.clientX - rect.left) / (_domElement.clientWidth)) * 2 - 1,
	y: - ((event.clientY - rect.top) / (_domElement.clientHeight)) * 2 + 1,
	button: event.button
});

```

and

```javascript
x: ((event.clientX - rect.left) / (rect.right - rect.left)) * 2 - 1,
y: - ((event.clientY - rect.top) / (rect.bottom - rect.top)) * 2 + 1;

```

without a chance.

When trying to move my object the transform square when hover changes color with an offset.  
It gets worst when the object is far away from 0 position

any idea, please let me know if you need more infos.

Best

---

<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: [December 20, 2022, 4:41pm UTC](https://discourse.threejs.org/t/transformcontrols-have-a-pointer-offset/45951/2 "2022-12-20T16:41:48Z")

</div>

Do you mind demonstrating the issue? Offsetting the canvas seems to work for me: [three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/azsk7wmL/1/)

---

<div class="post-metadata">

### Author: ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)
#### Post date: [December 20, 2022, 5:01pm UTC](https://discourse.threejs.org/t/transformcontrols-have-a-pointer-offset/45951/3 "2022-12-20T17:01:26Z")

</div>

I’ll try make a video to show you the issue. Thank you for your reply

---

<div class="post-metadata">

### Author: ![wenxich](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenxich/32/34785_2.png) [@wenxich](https://discourse.threejs.org/u/wenxich)
#### Post date: [March 24, 2023, 8:01am UTC](https://discourse.threejs.org/t/transformcontrols-have-a-pointer-offset/45951/4 "2023-03-24T08:01:11Z")

</div>

Hi! I’m having the same issue. Did you ever manage to resolve this?

---

<div class="post-metadata">

### Author: ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)
#### Post date: [March 24, 2023, 2:43pm UTC](https://discourse.threejs.org/t/transformcontrols-have-a-pointer-offset/45951/5 "2023-03-24T14:43:53Z")

</div>

@wenxich Nope, not for the moment.
