three.js - no update of scene lighting when light moving

Question

I have a simple THREE.js scene where I want a point light to move dynamically with the camera. The movement works well but the lighting in the scene is not updated immediately. When I change camera position (and thus light position) it takes some time (approx. 2-3 seconds) till the lighting in the scene renders correctly in respect of the new light position. I have already updated the matrix/matrixWorld of the lights in every frame. Is a further update needed? How to tell Three.js that light position has changed?

Answer 1

There is no specific way needed to tell THREE.js lightsources have changed their positions. Here it is important how to make the update of transformation matrices. I have a lightGroup (instance of Object3D) which is the parent node for all lightsources in my scene. Updating the lightGroup transformation according to the camera works with this setup:

if (camera !== undefined)
{
    lightGroup.position.x = camera.position.x;
    lightGroup.position.y = camera.position.y;
    lightGroup.position.z = camera.position.z;

    lightGroup.lookAt(camera.target);

    lightGroup.updateMatrix();
    lightGroup.updateMatrixWorld();     
}

The update of the transformation matrix is the point here. Another approach is to hang the camera into the THREE.js scenegraph and attach lights as its children, if you want to avoid a seperate lightGroup node.

By the way: Specific update of THREE.js scene is only needed if you change the number of lightsources in a scene. See https://github.com/mrdoob/three.js/wiki/Updates at Materials.

Answer 2

I know it is old post, however maybe someone will need other solutions.

To move lights dynamicly with camera You can just attach them to camera.

directionalLight = new THREE.DirectionalLight(0xffffff,0.6);
    directionalLight.position.set(0,20,0);
    directionalLight.rotation.set(+20/180*Math.PI,0,0);
    directionalLight.castShadow = true;
    camera.add(directionalLight);
    
    scene.add(camera);