three.js light from camera straight to object

Question

in my three js setting I have the following settings for a directional light:

private aLight: THREE.DirectionalLight;

this.aLight = new THREE.DirectionalLight(0xffffff, 1.0);
this.aLight.position.set(-5, 5, 5);

this.aScene.add(this.aLight);

In order to have the light following my camera and always illuminate my mesh I set the following in my render function: private onRender() {

this.aLight.position.copy(this.aCamera.getWorldPosition());

window.requestAnimationFrame(_ => this.onRender());
this.aRenderer.render(this.aScene, this.aCamera);

Now, the object is always illuminated:

but if I zoom in the surfaces facing the camera are dark:

I would like to have my light always pointing from my camera to the object. What am I doing wrong?

Answer 1

If you want a light source to be coincident with your camera, the easiest solution is to use a point light and add it as a child of the camera. You can uses a pattern like this:

camera.position.set( 10, 10, 10 );
scene.add( camera ); // required in this case since the camera will have a child

// ambient
scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) ); // optional

// light
var light = new THREE.PointLight( 0xffffff, 1 );
camera.add( light );

If you are using a directional light, remember that a directional light has a target property, an Object3D. So if you zoom in, you will likely have to change target.position. Using a point light, as I explained above, is easier.

three.js r.86