Set target of directional light in THREE.js

Question

I have model far away from the origin, and I want a directional light to hit the model like sunlight would do.

I set a position and a target for my DirectionalLight:

export const dirLight = getDirectional(); 
function getDirectional()  {
    const dirLight = new DirectionalLight( 0xffffff, 1 );
    dirLight.position.set( 585000 + 10000, 6135000 + 10000, -500 + 5000);

    return dirLight;
};


const helper = new THREE.DirectionalLightHelper( dirLight, 1000 );
let t = new THREE.Object3D();
t.translateX(585000);
t.translateY(6135000);
t.translateZ(1000);
dirLight.target = t;
scene.add(dirLight);
scene.add(dirLight.target);
scene.add(t);
helper.update();
scene.add( helper );

I would expect the light direction now to be parallel to vector between light position and light target, but apparently the light direction is still towards the origin of the scene. What am I doing wrong ?

A running example can be seen here

score 4 · Answer 1 · answered Oct 01 '20 at 08:47

The documentation states that the target needs to be added to the scene so that the world coordinates are calculated. However, that does not seem to work.

So, instead I tried manually updating the world coordinates, and that worked. Probably that will only work with a static target.

In your case that would be adding

dirLight.target.updateMatrixWorld();

Set target of directional light in THREE.js

1 Answers1