Syncing Directional Lighting and Trackball Control - Threejs

Question

I have an application in which I am rendering objects using three.js. I am using both directional lighting and the trackball controls. I am aware that with the controls I am moving the the camera, and that the light position is static.

However, upon movement I would like the light to move along with the camera, such that at each point of view the lighting conditions seem identical. This way the suspended object appears that is is rotating, rather than the camera.

Currently I have:

camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
camera.position.z = 3;

light = new THREE.DirectionalLight(0xAAAAAA, 1);
light.position = camera.position;
scene.add(light);

What I have tried:

1. Similar approaches using different types of lighting (although this would be preffered)
2. Trying to update the position withing the Render loop, which has no effect at all.

The effect this generates is that the light is on the opposite side of the object and static, which does not make sense. I would imagine since the light position is the same, it would point in the same direction.

Update:

So after using:

light.castShadow = true;
light.shadowCameraVisible = true;

I can observe the frames outlining the lights being cast. I can see that the position of the light is changed, but the light itself is not redrawn from its original position. Is there something that needs to be enabled for the light to be redrawn?

Any help is appreciated.

Answer 1

If you want to create the illusion that the object is spinning, do something like this:

Use a PointLight and add it as a child of the camera, instead of a child of the scene: camera.add( light );, and offset the point light like so: light.position.set( 10, 10, 0 );

You will need to add the camera as a child of the scene, too, in this case: scene.add( camera );

three.js r.66

Answer 2

In my test, I can attach the directional light to the camera and create a light appearing from the side. If you use the 'directional light' helper, you can get a good idea of how this light source shines.

  var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.2); 
  directionalLight.position.set( 500, 100, 0 ); 
  directionalLight.target.position.set( 0, 0, 0 ); 

  dlightHelper = new THREE.DirectionalLightHelper(directionalLight, 50); 
  camera.add( dlightHelper);

  camera.add( directionalLight );