Adding and removing three.js lights at run time

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.