Match light rotation to the camera's as a user interacts

Questions
1

I want the directional lights in my scene to follow the camera as the user moves it.

The lights are added to a parent THREE.Group which is added to the scene.

As part of the animation loop, I copy the quaternion from the camera to the light parent and I thought this would give me what I want but as you can see from the fiddle, it does not.

What am I doing wrong?

2

The directionalLight also has a .target member which is an Object3d that the light will point at… (which isn’t added to the scene by default) so if you want to attach the directionalLight to something moving, you also want to:

thing.add(directionalLight);
thing.add( directionalLight.target );

to that thing as well… then you modify directionalLight.target.position to make the light point how you want.

OR

you can add that target to the light itself…

directionalLight.add( directionalLight.target )
thing.add(directionalLight);

i suppose, and then the light direction will just be controlled by light.rotation ( since the target is a child.)

https://threejs.org/docs/#api/en/lights/DirectionalLight.target

3

I added the light target to my parent object but that made no difference.

If I increment the rotation of the light parent in my animation loop, it does what you’d expect - slowly rotate. around the vertical axis.

If the camera.rotation.y goes from 0... 2* Math.PI as you rotate the camera, I’d expect setting the former to the latter would work.

This doesn’t feel like a bug - more like something fundamental I am missing.

4

Cameras always point along the z axis… but a directionalLight points towards the light.target.position. So they don’t really behave the same.

Also… you might want to check the semantics of DirectionalLightHelper… Im not sure if its supposed to be added to the parent as well, or if its just supposed to be in the scene, and .update() called on it?
That might be muddying the waters…

https://threejs.org/docs/#api/en/helpers/DirectionalLightHelper

5

Also… you might want to check the semantics of DirectionalLightHelper… I

That was exactly it - I replaced the helper with a sphere and they do what I expect now.

The lighting changes as you rotate are very subtle and the helper geometry was distracting me.

Thank you.

1 Like
6

Yeah that has bitten me toooo many times. :confused: :smiley: yw

7

Yeah that has bitten me toooo many times. :confused: :smiley: yw

Heh!

I don’t like finding posts without updated Fiddles after a solution is found so I updated mine with what I think is the answer.

I also added an EXR environment map to the scene (and background, for debugging purposes) and made the model shinier so I could see the effects more readily. I update the rotation of the environment and background from the camera in the same way as the light helpers. (Thanks three.js #162)

In case it’s useful to someone later on:

1 Like