# spotLight is not defined

**URL:** <https://discourse.threejs.org/t/spotlight-is-not-defined/34692>\
**Category:** Questions\
**Tags:** spotlight\
**Created:** [February 9, 2022, 5:03pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692 "2022-02-09T17:03:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [February 9, 2022, 5:03pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692/1 "2022-02-09T17:03:31Z")

</div>

so my 2nd and 3rd spot lights are undefined for some reason?  
works if i remove spotLight2 and 3 but why?

```javascript
// global
var camera, flashLight, spotLight, spotLight2, spotLight3;

```

```javascript
 const fov = 65;
    const aspect = window.innerWidth / window.innerHeight;
    const near = 1.0;
    const far = 230;
    this._camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    this._camera.position.set(0, 0, 0);
camera = this._camera;

	flashLight = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 7, 20), new THREE.MeshPhongMaterial({color:0x000000}));
			flashLight.rotateX(Math.PI/2);
		camera.add(flashLight);

			spotLight = new THREE.SpotLight(0xffffff, 0.5, 150);
			spotLight.power = 4000;
			spotLight.angle = 0.5;
			spotLight.decay = 2;
			spotLight.penumbra = 0.1;
			spotLight.distance = 200;
			spotLight.castShadow = true;
			spotLight.rotateX(Math.PI/2);

     spotLight2 = new THREE.SpotLight(0xCCCCCC, 0.5, 150);
			spotLight2.power = 2000;
			spotLight2.angle = 0.55;
			spotLight2.decay = 2;
			spotLight2.penumbra = 0.1;
			spotLight2.distance = 200;
			spotLight2.castShadow = true;
			spotLight2.rotateX(Math.PI/2);
      
      spotLight3 = new THREE.SpotLight(0xFFFFFF, 0.5, 150);
			spotLight3.power = 4000;
			spotLight3.angle = 0.6;
			spotLight3.decay = 2.5;
			spotLight3.penumbra = 0.1;
			spotLight3.distance = 200;
			spotLight3.castShadow = true;
			spotLight3.rotateX(Math.PI/2);
      
      flashLight.add(spotLight);
			flashLight.add(spotLight.target);
			flashLight.add(spotLight2);
			flashLight.add(spotLight2.target);
      flashLight.add(spotLight3);
			flashLight.add(spotLight3.target);

```

animate:

```javascript
flashLight.position.copy(camera.position);
			flashLight.position.x += 2;
			flashLight.position.y -= 3;
			flashLight.position.z -= 1;

```

any idea’s?

---

<div class="post-metadata">

**Author:** ![ExoGeN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/exogen/32/23277_2.png) [@ExoGeN](https://discourse.threejs.org/u/ExoGeN)\
**Post date:** [February 9, 2022, 6:09pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692/2 "2022-02-09T18:09:50Z")

</div>

I don’t know what causing it, but positions don’t like integer. Try this:

```javascript
flashLight.position.copy(camera.position);
			flashLight.position.x += parseFloat(2);
			flashLight.position.y -= parseFloat(3);
			flashLight.position.z -= parseFloat(1);

```

else try to set them all to 0 to see if something changed.

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [February 9, 2022, 6:15pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692/3 "2022-02-09T18:15:35Z")

</div>

> [@ExoGeN](#):
>
> ```javascript
> flashLight.position.copy(camera.position);
> flashLight.position.x += parseFloat(2);
> flashLight.position.y -= parseFloat(3);
> flashLight.position.z -= parseFloat(1);
> 
> ```

spotLight2 undefined

---

<div class="post-metadata">

**Author:** ![ExoGeN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/exogen/32/23277_2.png) [@ExoGeN](https://discourse.threejs.org/u/ExoGeN)\
**Post date:** [February 9, 2022, 6:21pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692/4 "2022-02-09T18:21:30Z")

</div>

> [@UI\_UNICORN](#):
>
> `camera.add(flashLight);`

You add the flashLight befor you defined you spotlights ! Add the flashLight to the camera AFTER you defined your spotlights !?

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [February 9, 2022, 6:27pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692/5 "2022-02-09T18:27:22Z")

</div>

> [@UI\_UNICORN](#):
>
> camera.add(flashLight);

```javascript

	flashLight = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 7, 20), new THREE.MeshPhongMaterial({color:0x000000}));
			flashLight.rotateX(Math.PI/2);
	// original	camera.add(flashLight);

			spotLight = new THREE.SpotLight(0xffffff, 0.5, 150);
			spotLight.power = 4000;
			spotLight.angle = 0.5;
			spotLight.decay = 2;
			spotLight.penumbra = 0.1;
			spotLight.distance = 200;
			spotLight.castShadow = true;
			spotLight.rotateX(Math.PI/2);

  spotLight2 = new THREE.SpotLight(0xCCCCCC, 0.5, 150);
			spotLight2.power = 2000;
			spotLight2.angle = 0.55;
			spotLight2.decay = 2;
			spotLight2.penumbra = 0.1;
			spotLight2.distance = 200;
			spotLight2.castShadow = true;
			spotLight2.rotateX(Math.PI/2);
      
      spotLight3 = new THREE.SpotLight(0xFFFFFF, 0.5, 150);
			spotLight3.power = 4000;
			spotLight3.angle = 0.6;
			spotLight3.decay = 2.5;
			spotLight3.penumbra = 0.1;
			spotLight3.distance = 200;
			spotLight3.castShadow = true;
			spotLight3.rotateX(Math.PI/2);
      
      flashLight.add(spotLight);
			flashLight.add(spotLight.target);
			flashLight.add(spotLight2);
			flashLight.add(spotLight2.target);
      flashLight.add(spotLight3);
			flashLight.add(spotLight3.target);
      
      // added 
     camera.add(flashLight);

```

still undefined funny enough it works with spotLight but returns undefined for spotLight2 and spotLight3  
i can see no errors either

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [February 9, 2022, 6:33pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692/6 "2022-02-09T18:33:12Z")

</div>

i really don’t understand why it is working for first spotlight but non of the others it really doesnt make any sense

---

<div class="post-metadata">

**Author:** ![ExoGeN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/exogen/32/23277_2.png) [@ExoGeN](https://discourse.threejs.org/u/ExoGeN)\
**Post date:** [February 9, 2022, 6:35pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692/7 "2022-02-09T18:35:45Z")

</div>

Did you try just to use one of the others ? temporarily deactivated

> spotLight1 and spotLight3

to see if spotLight2 works?

EDIT:

???

```javascript
var spotLight1;
var spotLight2;
var spotLight3;

```

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [February 9, 2022, 6:40pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692/8 "2022-02-09T18:40:53Z")

</div>

yep tried using spotlight 2 and 3 on their own but get undefined even changed the var names still didn’t work it only works when the var is spotLight its weird  
my vars are definded in the same exact place:  
// global  
var camera, flashLight, spotLight, spotLight2, spotLight3;

---

<div class="post-metadata">

**Author:** ![ExoGeN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/exogen/32/23277_2.png) [@ExoGeN](https://discourse.threejs.org/u/ExoGeN)\
**Post date:** [February 9, 2022, 6:50pm UTC](https://discourse.threejs.org/t/spotlight-is-not-defined/34692/9 "2022-02-09T18:50:42Z")

</div>

Maybe this can help:

[spotLight.target.position issue](https://github.com/mrdoob/three.js/issues/5555)