# How to control Directional Light Helper with Transform Controls

**URL:** <https://discourse.threejs.org/t/how-to-control-directional-light-helper-with-transform-controls/17339>\
**Category:** Questions\
**Tags:** transform-controls\
**Created:** [July 23, 2020, 8:15am UTC](https://discourse.threejs.org/t/how-to-control-directional-light-helper-with-transform-controls/17339 "2020-07-23T08:15:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Boris\_Bek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boris_bek/32/5493_2.png) [@Boris\_Bek](https://discourse.threejs.org/u/Boris_Bek)\
**Post date:** [July 23, 2020, 8:15am UTC](https://discourse.threejs.org/t/how-to-control-directional-light-helper-with-transform-controls/17339/1 "2020-07-23T08:15:56Z")

</div>

![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/74527e1f51e43366374ca36e547986dc940be276.png)

Hello, I am trying to achieve the same result as shown in the photo  
so I am trying to make creat directional light helper and control it with transform controls

```
 const light_container = new THREE.Object3D();
     light_container.name = "DirectionalLight";
      light_container.lookAt(new THREE.Vector3());

      const directional_light = new THREE.DirectionalLight(0xffffff, 0.5);
      directional_light.position.set(0, 0, 0);
      light_container.add(directional_light);

      var helper = new THREE.DirectionalLightHelper(
        directional_light,
        5,
        "#dc3545"
      );
      helper.position.set(0, 0, 0);
      light_container.add(helper);

transform_controls.attach(light_container ); 

```

this is part of my code and it is working not correctly  
thank you in advance

---

<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:** [July 23, 2020, 8:26am UTC](https://discourse.threejs.org/t/how-to-control-directional-light-helper-with-transform-controls/17339/2 "2020-07-23T08:26:15Z")

</div>

Have you considered to use the same approach like in the [editor](https://threejs.org/editor/)? The respective code is part of the `three.js` repository.

---

<div class="post-metadata">

**Author:** ![Boris\_Bek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boris_bek/32/5493_2.png) [@Boris\_Bek](https://discourse.threejs.org/u/Boris_Bek)\
**Post date:** [July 23, 2020, 8:38am UTC](https://discourse.threejs.org/t/how-to-control-directional-light-helper-with-transform-controls/17339/3 "2020-07-23T08:38:16Z")

</div>

I could not find that part of the code in the Editor.  
I only found the part that you can add Directional Light

---

<div class="post-metadata">

**Author:** ![Boris\_Bek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boris_bek/32/5493_2.png) [@Boris\_Bek](https://discourse.threejs.org/u/Boris_Bek)\
**Post date:** [July 23, 2020, 8:51am UTC](https://discourse.threejs.org/t/how-to-control-directional-light-helper-with-transform-controls/17339/4 "2020-07-23T08:51:19Z")

</div>

![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/e68fecb10024799c266dbef62c1e881a4b63532f.png)

this is what I achieve the transform arrow are not line up with the center of the directional light helper

---

<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:** [July 23, 2020, 9:53am UTC](https://discourse.threejs.org/t/how-to-control-directional-light-helper-with-transform-controls/17339/5 "2020-07-23T09:53:21Z")

</div>

Maybe like so: [https://jsfiddle.net/u0yzep5b/1/](https://jsfiddle.net/u0yzep5b/1/)

Notice that the helper needs to be a child of the scene.

---

<div class="post-metadata">

**Author:** ![Boris\_Bek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boris_bek/32/5493_2.png) [@Boris\_Bek](https://discourse.threejs.org/u/Boris_Bek)\
**Post date:** [July 23, 2020, 11:39am UTC](https://discourse.threejs.org/t/how-to-control-directional-light-helper-with-transform-controls/17339/7 "2020-07-23T11:39:12Z")

</div>

thank you 🙂