title: Is problem between DirectionalLightHelper and CameraHelper causing issue with scene shadows?
body: <img src="https://i.stack.imgur.com/ixTLb.png" width="500">
  <p>I'm working on building up quite a complex static render in the browser with three.js and have gotten stuck early in the process trying to produce correct shadows with a single <code>THREE.DirectionalLight</code> representing the sun in my scene. All the geometry (contained in another .js file) has shadows enabled. The green sphere is for debugging purposes and is translated (50,0,50) to the center of the plane to represent the target for the camera and location of DirectionalLight.target. The directional light position and main camera position did set correctly.</p>
  <p>My theory on why the shadows aren't working is because the orthogonal camera representing the shadow camera is pointing off in the wrong direction. I failed yesterday to figure out and solve the behaviour of the directional light helper (white line to the origin) and shadow camera helper (right).</p>
  <p>I'm assuming the correct orientation, and the orientation I'm aiming for, has the directional light helper and shadow camera helper aligned to the center of the plane. After so much research yesterday, my shadow camera doesn't seem to automatically pick up the light position / light target vector. Why are they still anchored to the origin?</p>
  <p>Does anyone have any suggestions about how to fix the <code>DirectionalLight.target</code> in my scene? Why are the <code>DirectionalLightHelper</code> and <code>CameraHelper</code> inconsistent?</p>
  <pre><code>// Set up
  const canvus = document.getElementById('canvus');
  const scene = new THREE.Scene();
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFShadowMap;
  
  //Camera
  const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 500);
  camera.position.set(200, 100, 100);
  camera.lookAt(50, 0, 50);
  
  // Lighting
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(100, 200, 200);
  directionalLight.target.position.set(50, 0, 50);
  directionalLight.castShadow = true;
  directionalLight.shadow.bias = 0.0001;
  directionalLight.shadow.mapSize.width = 1024; // default
  directionalLight.shadow.mapSize.height = 1024; // default
  
  const view_n = 50;
  directionalLight.shadow.camera = new THREE.OrthographicCamera(
      -view_n,
      view_n,
      view_n,
      -view_n,
      60,
      150
  );
  
  scene.add(directionalLight, directionalLight.target);
  
  //helpers
  const lighthelper = new THREE.DirectionalLightHelper(directionalLight, 10);
  const camerahelper = new THREE.CameraHelper(directionalLight.shadow.camera);
  scene.add(lighthelper);
  scene.add(camerahelper);
  
  //Main Render
  createBasicGeometry(scene); // from geometry.js
  createGroundPlane(scene); // from geometry.js
  renderer.render(scene, camera);
  </code></pre>
  <p><strong>Update 2020-1-5</strong></p>
  <p>I had initially tried setting the camera and also found examples of people setting a new ortho shadow camera directly. As I'm motivated to overcome the issue, and for thoroughness, I updated my code to reflect the suggestion and unfortunately the problem persists. I've re-checked that all mesh geometry is set to both <code>object.receiveShadow = true</code> and <code>object.castShadow = true</code> with the <code>MeshPhongMaterial</code>. It's completely confounding why <code>directionalLight.target.position.set(50, 0, 50)</code> is not updating as expected. What is the cause of this behaviour?</p>
  <pre><code>// Updated Lighting
  const view_n = 50;
  directionalLight.castShadow = true;
  directionalLight.shadow.bias = 0.0001;
  
  directionalLight.shadow.camera.right = view_n;
  directionalLight.shadow.camera.left = -view_n;
  directionalLight.shadow.camera.top = view_n;
  directionalLight.shadow.camera.bottom = -view_n;
  directionalLight.shadow.camera.near = 60;
  directionalLight.shadow.camera.far = 150;
  
  directionalLight.shadow.mapSize.width = 1024; // default
  directionalLight.shadow.mapSize.height = 1024; // default
  
  scene.add(directionalLight, directionalLight.target);
  </code></pre>
  <img src="https://i.stack.imgur.com/SAG0r.png" width="500">
  <p>When I dump the <code>directionalLight</code> I get the target position I expected, though not aligned correctly in the scene. While the camera position gives another strange results.</p>
  <pre><code>console.log(directionalLight.target.position);
  //Vector3 {x: 50, y: 0, z: 50, isVector3: true}
  console.log(directionalLight.shadow.camera.position);
  </code></pre>
  <img src="https://i.stack.imgur.com/6oUT7.png" width="400">