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.

WestLangley · Answer 1 · 2020-05-09T16:50:35.127

3

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

edited May 09 '20 at 16:50

answered Jun 02 '13 at 03:21

WestLangley

102,557
10
276
276

Thanks for replaying. Yes, I tried material.needsUpdate=true, although I defined a global var=material and setup it, it gives me an error"Cannot set property 'needsUpdate' of undefined".I used mesh.material.needsUpdate=true an there were no errors,but the light still visible. I am using jQuery and I put the change event for checkboxes inside $(document).ready(). I also tried and put the change event inside my render() function , but the light still visible. I am wondering, in this case, where is the bast place to put events handling functions. – Miloud Eloumri Jun 02 '13 at 11:53

score 1 · Answer 2 · answered Jun 13 '16 at 12:00

1

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.

answered Jun 13 '16 at 12:00

Rantiev

2,121
2
32
56

What three.js version are you using? – WestLangley Jun 13 '16 at 12:30
You can check here. https://github.com/rantiev/threejs-clock I was using revision 72 have tried almost latest 77 and it works. Not sure whether it's version number, i don's see anything in top file part except revision, no any banner comment with version number is here. – Rantiev Jun 26 '16 at 11:02
Sorry. I should have used the word "revision". "Version" means the same thing, though. – WestLangley Jun 26 '16 at 15:46

score 0 · Answer 3 · edited Jun 09 '14 at 11:22

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);
        }
    }

Adding and removing three.js lights at run time

3 Answers3

Linked