@twisted posted a new topic, subject "DirectionalLightHelper seems to be pointing in wrong direction". It read:

   Could anyone tell me what I'm doing wrong here?
    
    I've added a THREE.DirectionalLight to a scene and set its target to somewhere other than the origin. Logging light.target.position confirms that the target position does now have the value I set.
    
    Now I add a THREE.DirectionalLightHelper.
    [code] 
            function initLight(){
              const light = new THREE.DirectionalLight(0xFFFFFF, 5);
              light.position.set(-100, 100, 0);
              light.target.position.set(0, 200, 200);
              scene.add(light);
              scene.add(light.target);
              console.log(JSON.stringify(light.target.position));  //{"x":0,"y":200,"z":200} ok
              //add a helper
              const helper = new THREE.DirectionalLightHelper(light, 10);
              scene.add(helper);
              helper.update();                                    //needed?
            }
        
    [/code]
    
    Viewing the page, the helper looks as though it's pointing at the origin instead of (0,200,200).
    
    Full code of a page demonstrating this is as follows. In order to visualize where the helper is pointing, I added xyz axes coloured in RGB order.
    [code] 
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>directional-light-helper-problem-01</title>
          <style>
            canvas{
              height: 100%;
              width: 100%;
            }
          </style>
          <script type='module'>
        
            import * as THREE from '../lib/three-js-129/build/three.module.js';
            import {OrbitControls} from '../lib/three-js-129/examples/jsm/controls/OrbitControls.js';
        
            const RED    = 0xff0000;
            const GREEN  = 0x00ff00;
            const BLUE   = 0x0000ff;
            const LIMIT = 100;
        
            let canvas, scene, renderer, camera;
        
            function initAxes(){
              var xAxisMaterial = new THREE.LineBasicMaterial({ color: RED });
        	    var yAxisMaterial = new THREE.LineBasicMaterial({ color: GREEN });
        	    var zAxisMaterial = new THREE.LineBasicMaterial({ color: BLUE });
              let points 
              //x axis
              points = [];
        	    points.push(new THREE.Vector3(-LIMIT, 0, 0));
        	    points.push(new THREE.Vector3(LIMIT, 0, 0));
        	    var geometryXAxis = new THREE.BufferGeometry().setFromPoints(points);
              const xAxis = new THREE.Line( geometryXAxis, xAxisMaterial );
        	    scene.add(xAxis);
              //y axis
              points = [];
        	    points.push(new THREE.Vector3(0, -LIMIT, 0));
        	    points.push(new THREE.Vector3(0,  LIMIT, 0));
        	    var geometryYAxis = new THREE.BufferGeometry().setFromPoints(points);
              const yAxis = new THREE.Line( geometryYAxis, yAxisMaterial );
        	    scene.add(yAxis);
              //z axis
              points = [];
        	    points.push(new THREE.Vector3(0, 0, -LIMIT));
        	    points.push(new THREE.Vector3(0, 0,  LIMIT));
        	    var geometryZAxis = new THREE.BufferGeometry().setFromPoints(points);
              const zAxis = new THREE.Line( geometryZAxis, zAxisMaterial );
        	    scene.add(zAxis);
            }
        
            function initRenderer() {
              renderer = new THREE.WebGLRenderer({ canvas:canvas, antialias: true });
            }
        
            function initCamera() {
              camera = new THREE.PerspectiveCamera(70, 1, 1, 10000);
              scene.add(camera);
              camera.position.set(180, 150, 100); 
            }
        
            function render() {
              requestAnimationFrame(render);
              renderer.render(scene, camera);
            }
        
            function initLight(){
              const light = new THREE.DirectionalLight(0xFFFFFF, 5);
              light.position.set(-100, 100, 0);
              light.target.position.set(0, 200, 200);
              scene.add(light);
              scene.add(light.target);
              console.log(JSON.stringify(light.target.position));  //{"x":0,"y":200,"z":200} ok
              //add a helper
              const helper = new THREE.DirectionalLightHelper(light, 10);
              scene.add(helper);
              helper.update();                                    //needed?
            }
        
            window.onload = function(){   
              canvas = document.getElementById('canvasId');
              scene = new THREE.Scene();
              initRenderer();
              initCamera();
              initAxes();
              initLight();
              new OrbitControls(camera, canvas);
              render();
            }
        
          </script>
        </head>
        <body>
          <canvas id='canvasId'></canvas>
        </body>
        </html>
        
    [/code]
    
    I've put the page online here:  
    https://mytestpages.com/three/directional-light-helper-problem-01.html

After which, @Drumstructor (Stephan Stockburger) added

    I think you need to update the helpers parent worldMatrix before updating it like this:
    [code] 
        helper.parent.updateMatrixWorld();
        helper.update();
        
    [/code]

After which, @twisted added

    That works. Thank you.
    
    https://mytestpages.com/three/directional-light-helper-problem-02.html


{'source': 'discourse', 'url': 'https://discourse.threejs.org/t/directionallighthelper-seems-to-be-pointing-in-wrong-direction/27362', 'title': 'DirectionalLightHelper seems to be pointing in wrong direction', 'views': 916, 'has_accepted_answer': True, 'word_count': 566, 'like_count': 1, 'reply_count': 1, 'participant_count': 2, 'posts': 3, 'tags': 'lights helpers', 'author': '@twisted', 'participants': '@twisted, @Drumstructor (Stephan Stockburger)', 'image_url': ['https://global.discourse-cdn.com/standard17/uploads/threejs/original/3X/1/0/10473ef1ea80fcab38153b39e34ee9a8af29484f.png'], 'created_at': '2021-06-19T08:03:08.629Z', 'last_posted_at': '2021-06-19T10:18:24.310Z'}