How to control Directional Light Helper with Transform Controls

[Boris_Bek]

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

[Mugen87]

Have you considered to use the same approach like in the editor? The respective code is part of the three.js repository.

[Boris_Bek]

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

[Boris_Bek]

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

[Mugen87]

Maybe like so: https://jsfiddle.net/u0yzep5b/1/

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

[Boris_Bek]

thank you