DirectionalLightHelper seems to be pointing in wrong direction

Questions
,
1

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.

    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?
    }

Viewing the page, the helper looks as though it’s pointing at the origin instead of (0,200,200).

directionallighthelper-problem

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.

<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>

I’ve put the page online here:
https://mytestpages.com/three/directional-light-helper-problem-01.html

2

I think you need to update the helpers parent worldMatrix before updating it like this:

helper.parent.updateMatrixWorld();
helper.update();
1 Like
3

That works. Thank you.

https://mytestpages.com/three/directional-light-helper-problem-02.html