Adding and removing three.js lights at run time - three.js

Question

How to add and remove different light types at run time in three.js?
I have some checkboxes, each representing a light type and I want to add a certain light type to the scene when its checkbox is checked and remove the light when unchecked.
I tried: scene.remove(light) and light.visible = false, but did not work.

Answer 1

With WebGLRenderer, if you change the number of lights, or types of lights, you need to set material.needsUpdate = true.
A better option is to set the light intensity to zero.
For more information, see the Wiki article How to Update Things.
three.js r.116

Answer 2

To hide/show light use:
light.visible = false; //or true
and set needsUpdate for all your materials to true.
material.needsUpdate = true;
I have all materials inside one object which properties are materials objects, so i have.
for (var material in materials) {
if (materials.hasOwnProperty(material)) {
materials[material].needsUpdate = true;
}
}
That will allow you to see all updates. Before you do needsUpdate trick, you will see nothing in most cases.

Answer 3

It worked with me like this:
render(){
// some other code ....
//light
if($('#dLight').is(':checked')){
dLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value')).normalize();
dLight.intensity = $('#light-intensity-id').slider('value');
dLight.color.setHex('0x' + $('#light-color').val());
scene.add(dLight);
}else{
scene.remove(dLight);
}
if($('#pLight').is(':checked')){
pLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value'));
pLight.intensity = $('#light-intensity-id').slider('value');
pLight.color.setHex('0x' + $('#light-color').val());
scene.add(pLight);
}else{
scene.remove(pLight);
}
if($('#sLight').is(':checked')){
sLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value'));
sLight.intensity = $('#light-intensity-id').slider('value');
sLight.color.setHex('0x' + $('#light-color').val());
scene.add(sLight);
}else{
scene.remove(sLight);
}
if($('#aLight').is(':checked')){
aLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value'));
aLight.color.setHex('0x' + $('#light-color').val());
scene.add(aLight);
}else{
scene.remove(aLight);
}
}