My goal is to attach a directional flashlight to the camera (controls object) so that the beam always points towards the center of the screen. Here's the code I'm currently using:
controls = new PointerLockControls( camera, document.body );
var flashlight = new THREE.SpotLight(0xffffff, 7, 50, 0.8*Math.PI);
controls.getObject().add(flashlight);
controls.getObject().add(flashlight.target);
However, instead of a straight beam, the result is light around the camera as shown in the image below.
https://i.sstatic.net/VFevv.png
So, how can I achieve a directional beam?
//edit, added Group.
controls = new PointerLockControls( camera, document.body );
var flashlight = new THREE.SpotLight(0xffffff, 7, 50, 0.8*Math.PI);
// camera.add(flashlight);
// camera.add(flashlight.target);
const group = new THREE.Group();
group.add(camera);
group.add(flashlight);
scene.add(group);