Lock the rotation of an object to the camera rotation

[callumprentice]

My three.js application has 3 directional lights that are parented on a THREE.Group() which is then added to the scene.

I used CameraControls to fit the scene to my viewport and provide mouse input.

I want to lock the rotation of the light parent to the rotation (azimuth angle) of the camera so that as you move the camera around the model, the lights appear stationary.

Here is a simple JS Fiddle that illustrates is: https://jsfiddle.net/callum/qfkgnp2a/1/

I have tried many things including lines like:

lightParent.rotation.y = cameraControls.azimuthAngle;

or

lightParent.rotation.y = camera.rotation.y;

or

lightParent.quaternion.copy(camera.quaternion);

as well as more complex operations using THREE.MathUtils.euclideanModulo() but nothing works as I expect.

Is this something you have come across before?