Adjusting Directional Light Orientation in Three.js

In Three.js, directional lights work differently than you might expect. The direction of a directional light is calculated as a vector from the light's position to its target position. By default, the target is positioned at (0,0,0).

Here's how to properly change a directional light's direction:

Method 1: Using the target property

JAVASCRIPTCopied
// Create directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
scene.add(directionalLight);

// Position the light
directionalLight.position.set(10, 20, 30);

// Important: Add the target to the scene
directionalLight.target.position.set(5, 0, 0);
scene.add(directionalLight.target);

The key part that's often missed is that you need to add the light's target to the scene for the changes to take effect.

Method 2: Setting direction directly

Alternatively, you can set the direction vector:

JAVASCRIPTCopied
// Position the light
directionalLight.position.set(10, 20, 30);

// Calculate direction vector (normalized)
const targetPosition = new THREE.Vector3(5, 0, 0);
const direction = new THREE.Vector3()
  .subVectors(targetPosition, directionalLight.position)
  .normalize();

// Apply the direction
directionalLight.target.position.copy(
  directionalLight.position.clone().add(direction)
);
scene.add(directionalLight.target);

Remember that for directional lights, the actual position doesn't matter as much as the relative direction between the light and its target, since directional lights cast parallel rays in a specific direction.