# Adding and removing three.js lights at run time

**URL:** <https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303>\
**Category:** Questions\
**Tags:** lights\
**Created:** [July 1, 2018, 8:05am UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303 "2018-07-01T08:05:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 1, 2018, 8:05am UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/1 "2018-07-01T08:05:00Z")

</div>

If add new light then delete or clear previous Light object.

Please help me.

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 1, 2018, 8:42am UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/3 "2018-07-01T08:42:47Z")

</div>

> [@Mugen87](#):
>
> Your

I am loading new Object for implemented some task , during loading the object added some light, object position, texture image are loaded.

Again or next new object to be load than previous data should be clear or deleted.

For Example:-  
First Object loaded.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/6461c19b50ac5b8d46a2b7df1ba0de4d0ae27ba3.jpg)  
Second Object Loaded:-  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/9d2c23bcc1676849bfe209e8f46c5db3d1ed7eaa.jpg)

=\> Lights are effecting in second object. I want delete or previous lights during second object loaded.

Thanks.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 1, 2018, 8:45am UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/4 "2018-07-01T08:45:42Z")

</div>

> [@sandeep](#):
>
> I want delete or previous lights during second object loaded.

Why don’t you just remove the lights from the scene graph?

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 1, 2018, 8:53am UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/5 "2018-07-01T08:53:40Z")

</div>

How to remove Light ?  
=\> Remove Light  
I am using this code but not working.  
scene.remove(scene.getObjectByName(‘Light’));

=\> Add light:  
pointLight = new THREE.PointLight(0xff0000, 0.5);  
pointLight.name = ‘Light’;  
camera.add(pointLight);  
scene.add(camera);

How to remove the previous light??

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 1, 2018, 8:58am UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/6 "2018-07-01T08:58:18Z")

</div>

The code looks correct but you are missing something. If you change the number of lights, you have to update the materials of your scene via `material.needsUpdate`. See [https://stackoverflow.com/questions/16879378/adding-and-removing-three-js-lights-at-run-time](https://stackoverflow.com/questions/16879378/adding-and-removing-three-js-lights-at-run-time)

This fact is also noted in the docs: [How to update things, section Materials](https://threejs.org/docs/#manual/introduction/How-to-update-things)

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 1, 2018, 9:07am UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/7 "2018-07-01T09:07:32Z")

</div>

> [@Mugen87](#):
>
> material.needsUpdate

Its working…

material.needsUpdate is only work for texture image update during.

It is not effecting on Light object.

---

<div class="post-metadata">

**Author:** ![Mehmet\_Emre\_Ozer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mehmet_emre_ozer/32/14987_2.png) [@Mehmet\_Emre\_Ozer](https://discourse.threejs.org/u/Mehmet_Emre_Ozer)\
**Post date:** [December 6, 2020, 9:31pm UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/8 "2020-12-06T21:31:47Z")

</div>

I have the same problem, I tried hard but my code is still not working. Any help will be appreciated.

My code is here: [https://jsfiddle.net/taf4p9jz/](https://jsfiddle.net/taf4p9jz/)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 6, 2020, 9:53pm UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/9 "2020-12-06T21:53:13Z")

</div>

Since you are not having an animation loop in your scene, you have to render it again when changing the light settings:

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/2j68n1ae/)**

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [December 7, 2020, 6:05am UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/10 "2020-12-07T06:05:08Z")

</div>

Hi Mehment.

Hope you are doing good!

You are using wrong method for light removing.

You should remove light from the scene.

Example.

scene.children.forEach(function (e) {

if (e.name == ‘Light’) {

scene.remove(e);

}

});

 ![BD75F13EA5264B5B82A9492BC2D685D5.png](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/677f06bdf711468707faf594c72c7993f90d2513.png)

---

<div class="post-metadata">

**Author:** ![Mehmet\_Emre\_Ozer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mehmet_emre_ozer/32/14987_2.png) [@Mehmet\_Emre\_Ozer](https://discourse.threejs.org/u/Mehmet_Emre_Ozer)\
**Post date:** [December 7, 2020, 9:31am UTC](https://discourse.threejs.org/t/adding-and-removing-three-js-lights-at-run-time/3303/11 "2020-12-07T09:31:14Z")

</div>

Thanks, Mugen87.