How to add a SpotLight to Camera with ThreeJS?

Question

Three.js r105

I'm trying to add a SpotLight to the camera to give it a "Flashlight" effect. Although, it seems the light stops working all-together once I add the SpotLight to my Camera. What am I doing wrong?

Weird, as the LightHelper looks to be working fine. Also, adding the SpotLight independently to the Scene works fine.

Once I attach the SpotLight to the Camera, there is no shred of even the smallest flicker of light

const cameraLight = new THREE.SpotLight(0xffffff, 4, 40);
cameraLight.castShadow = true;

cameraLight.shadow.bias = -0.0001;
cameraLight.shadow.mapSize.width = 512;
cameraLight.shadow.mapSize.height = 512;
cameraLight.shadow.camera.near = 0.1;
cameraLight.shadow.camera.far = 500;

var d = 32;

cameraLight.shadow.camera.left = -d;
cameraLight.shadow.camera.right = d;
cameraLight.shadow.camera.top = d;
cameraLight.shadow.camera.bottom = -d;

cameraLight.visible = true;
cameraLight.distance = 40;
cameraLight.decay = 1;
cameraLight.angle = Math.PI/2;
cameraLight.penumbra = 0.1;

camera.add( cameraLight );
cameraLight.position.set( 0, 0, 1);
cameraLight.target = camera;    

var cameraLightHelper = new THREE.PointLightHelper( cameraLight, 5, 0x00ff00 );
scene.add( cameraLightHelper );

scene.add( camera );

Answer 1

After hours of hair pulling, this is the code that made it work

const cameraLight = new THREE.SpotLight(0xffffff, 6);
cameraLight.castShadow = true;


cameraLight.shadow.bias = -0.0001;
cameraLight.shadow.mapSize.width = 512/4 * renderer.capabilities.maxTextures; // default
cameraLight.shadow.mapSize.height = 512/4 * renderer.capabilities.maxTextures; // default
cameraLight.shadow.camera.near = 0.1; // default
cameraLight.shadow.camera.far = 500; // default

var d = 32;

cameraLight.shadow.camera.left = -d;
cameraLight.shadow.camera.right = d;
cameraLight.shadow.camera.top = d;
cameraLight.shadow.camera.bottom = -d;

cameraLight.visible = true;
cameraLight.distance = 40;
cameraLight.decay = 1;
cameraLight.angle = Math.PI/4;
cameraLight.penumbra = 0.1; 
    
camera.add( cameraLight );
cameraLight.position.set( 0, 0, 1);
scene.add( camera );
cameraLight.target = camera;

Basically the same thing..

I did clear up my cache, so that could've been the issue? I don't know

Answer 2

If you're using a Spotlight, I recommend you use a SpotlightHelper, not a PointlightHelper.

You have to make sure your Spotlight is added to the Scene. Keep in mind that an object can only have one parent. So adding a light to the scene, then adding it to the camera removes it from the scene.

// This adds spotlight to scene
scene.add(spotlight);

// This removes spotlight from scene, and adds to camera
camera.add(spotlight);

So if you haven't added your camera to the scene, then the light won't be rendered. You can fix this with nesting one inside the other:

camera.add(spotlight);
scene.add(camera);

Now the light is the "grandchild" of the scene, and it will render. Just make sure your spotlight is facing in the same direction as the camera. You might have it pointing backwards or something, and you'll never see the cone of light. Using Spotlighthelper should help you figure out which way it's pointing.

Answer 3

• Which camera type has a "add" method ?
• The PointLightHelper accepts a PointLight as first argument.