# TransformControls is always retrieved when using Raycast

**URL:** <https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849>\
**Category:** Questions\
**Tags:** transform-controls, raycaster\
**Created:** [August 24, 2022, 9:21pm UTC](https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849 "2022-08-24T21:21:39Z")\
**Posts on this page:** 8\
**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:** [August 24, 2022, 9:21pm UTC](https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849/1 "2022-08-24T21:21:39Z")

</div>

**What I would like to do:**

I would like to avoid TransformControls to be detached when clicking a group of object empty space.

**What I Did:**  
if user clicks on an object inside a group it retrieves the intersected object then parse through parents till it finds the group. Then attach the group to the controls.If I click on an empty space then it detaches the controls.

**What happens:**

If I use Raycast and add the TransformControls inside the intersectObjects array the control is retrieved as intersected no matter if I click on an object or empty space.

**Expected Behaviour:**

I would like to retrieve the TransformControls when clicking on it and retrieve an empty array when clicking on an empty space in the canvas.

Many thanks in advance for your time.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 25, 2022, 11:13am UTC](https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849/2 "2022-08-25T11:13:15Z")

</div>

Assuming I understood what you mean correctly - a simple solution may be to just put a hidden bounding sphere around the transform controls when they are active.

That way clicking anywhere near the transform controls will still detect collision in the raycast and prevent the controls from being detached - while clicking further away will no longer detect collision with the sphere and should detach controls nicely.

---

<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:** [August 30, 2022, 11:34pm UTC](https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849/3 "2022-08-30T23:34:50Z")

</div>

> [@mjurczyk](#):
>
> Assuming I understood what you mean correctly - a simple solution may be to just put a hidden bounding sphere around the transform controls when they are active.
> 
> That way clicking anywhere near the transform controls will still detect collision in the raycast and prevent the controls from being detached - while clicking further away will no longer detect collision with the sphere and should detach controls nicely.

Thank you for your reply and sorry for the long delay.  
I understand your solution and tried it.  
In fact it didn’t worked for one reason, which is that my main problem is that the control itself apparently takes all the size of the canvas ( so when I click on an empty part I retrieve some Line object ).  
Adding a bounding sphere to a control that takes all the space gets me to the point where when I think I click on an empty part I click on the bounding sphere as a result the control never gets detached when it should.

So as a synthesis I would like to thank you again and ask you if you have any other ideas how to solve my issue?

I think an axis gets attached to the mouse position on click which makes it always intersect and increase the sphere radius.

Best

---

<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:** [September 2, 2022, 10:22pm UTC](https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849/4 "2022-09-02T22:22:31Z")

</div>

I finally manage to achieve what I want by removing the TransformControlsPlane object from the list of objects to be checked and added a couple of conditions to make this work. Thanks anyway.

---

<div class="post-metadata">

**Author:** ![Parisa\_Shahbazi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parisa_shahbazi/32/43776_2.png) [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Post date:** [January 26, 2025, 2:52pm UTC](https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849/5 "2025-01-26T14:52:44Z")

</div>

Hi  
Can you share code how Did you solve it ?

---

<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:** [February 16, 2025, 10:34pm UTC](https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849/6 "2025-02-16T22:34:37Z")

</div>

I’m sorry it’s been a while but if you have some code I can help you find a solution

---

<div class="post-metadata">

**Author:** ![Simon\_TESSIER](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/simon_tessier/32/58410_2.png) [@Simon\_TESSIER](https://discourse.threejs.org/u/Simon_TESSIER)\
**Post date:** [February 26, 2025, 1:28pm UTC](https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849/7 "2025-02-26T13:28:08Z")

</div>

The transform plane is used to drag the controller.  
My solution is to add only when dragging

```javascript
this.control = new OrbitControls(this.camera, canvas);
this.transformControl = new TransformControls(this.camera, this.canvas);
const helperPlane = this.transformControl.getHelper().children[1];
    this.transformControl.addEventListener('dragging-changed', (event) => {
      if (event.value) {
        this.control.enabled = false;
        this.transformControl.getHelper().add(helperPlane);
      } else {
        this.control.enabled = true;
        this.transformControl.getHelper().remove(helperPlane);
      }
    });

```

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 26, 2025, 1:45pm UTC](https://discourse.threejs.org/t/transformcontrols-is-always-retrieved-when-using-raycast/41849/8 "2025-02-26T13:45:24Z")

</div>

this is the way.