# Is the SpotLight the right tool for simulating multiple stage lights?

**URL:** <https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360>\
**Category:** Questions\
**Tags:** spotlight\
**Created:** [November 5, 2022, 4:33am UTC](https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360 "2022-11-05T04:33:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [November 5, 2022, 4:33am UTC](https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360/1 "2022-11-05T04:33:39Z")

</div>

I went through the same moments of head scratching others have gone through in regards to the ThreeJS spotlight. I thought I could put a spotlight anywhere in my ThreeJS scene using it’s `position` property:

> [@Change spotLight position](https://discourse.threejs.org/t/change-spotlight-position/19158):
>
> hi I Have a car model in my scene and i want to use spot light for its headlight so that it cast light in front of the car on the ground but my problem is that i can’t change position or rotation of the spotLight.I’ve tested position and target position but i couldn’t figure out its logic. here’s my scene: i want to move lights position to car’s front. sorry for my poor language slight_smile here’s my code: spotLight = new THREE.SpotLight( 0xff0000, 10 ); // scene…

Apparently and somewhat weirdly the `SpotLight` position property seems to make more like a rotation or “head points in direction” property since the docs seem to indicate that it acts like a vector that indicates the direction it is pointing in, not as I wrongly thought, that it acts like other ThreeJS objects where it sets the object’s XZY position in the scene?

Here are the docs on the `position` property:

> ### .position : Vector3
> 
> This is set equal to Object3D.DefaultUp (0, 1, 0), so that the light shines from the top down.

So right now, my only idea for solving my usage problem is to create an invisible object above the ground everywhere I want a spotlight and attach the spotlight to it? My overall intent is to simulate the effect of stage lights, which as you know are positioned all around the auditorium, especially the center and the sides, pointed at various parts of the stage. Is that the usual technique for placing spotlights at exact locations around a ThreeJS scene? The one thing that worries me about that idea as talked about in the forum link I placed above, is that it means you have to attach a child object to the main animation model at the “spot” you want the spotlight to be.

For example, in that forum thread the user wants to use a pair of spotlights as a pair of headlights. As far as I can tell that means the user would have to create a pair of headlight objects and then attach a spotlight to each headlight. I’d guess that’s fine in that user’s case because they probably havd to create a pair of headlight objects already. But in my case, I have a floating camera drone that is just a sphere, so I would have to create an invisible object, position it where I want in the new group object I now need to create to group the camera drone, add the invisible spotlight mounting object to the group, and then add the spotlight. I’ll do this extra work if I have to, but I’m hoping there is a more streamlined approach I could implement.

Or am I using the wrong threeJS object and if so, what should I be using instead?

Also, what are the pros and cons of creating a group to link objects as opposed to adding an object directly to another object using the `add()` method?

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [November 5, 2022, 8:41am UTC](https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360/2 "2022-11-05T08:41:45Z")

</div>

Read the [documentation](https://threejs.org/docs/) on [spotlight](https://threejs.org/docs/#api/en/lights/SpotLight.target) specifically the `.target` property…  
Also watch out for performance drops using many spotlights

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 5, 2022, 12:08pm UTC](https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360/3 "2022-11-05T12:08:37Z")

</div>

imo a spot light is the wrong tool. you light cars with big lightformers (been into photography years ago and had the chance to follow some car photographer guys around). but this is what creates these streaks and strips that give the car character and shape.

in threejs there are no rect lights that are feasible runtime, so make your own inside an environment map. few people seem to know about it, but this is the cheapest, easiest key to good looking scenes. here’s an example, this is how a car looks with point and spotlights:

 ![2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/8/b8c042fd757ab5b19683c6ab2ceefec1154c7ec2.jpeg)

and this happens when you add an environment map with light formers:

 ![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/e/2e8385894158cb2820ea5fcbfee0af887b9779a9.jpeg)

no light in threejs will give you that kind of look. only environments. the process is explained here: [Live envmaps and getting realistic studio lighting almost for free](https://discourse.threejs.org/t/live-envmaps-and-getting-realistic-studio-lighting-almost-for-free/35627) it is super easy.

as for spot lights, they’re not like in blender, volumetric. so if that’s what you want you need to figure out shading. here’s an example for that:

> **[Volumetric spotlight - CodeSandbox](https://codesandbox.io/s/volumetric-spotlight-tx1pq)**
>
> Volumetric soft particle spot lights.

the article which explains how to do that is here: [john-chapman-graphics: "Good Enough" Volumetrics for Spotlights](http://john-chapman-graphics.blogspot.com/2013/01/good-enough-volumetrics-for-spotlights.html)

---

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [November 5, 2022, 2:50pm UTC](https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360/4 "2022-11-05T14:50:11Z")

</div>

> [@Lawrence3DPK](#):
>
> Read the [documentation](https://threejs.org/docs/) on [spotlight](https://threejs.org/docs/#api/en/lights/SpotLight.target) specifically the `.target` property…  
> Also watch out for performance drops using many spotlights

Thanks for the performance tip. I did read about the `target` property and that’s great for “target following” but I still don’t see an easy path for _positioning_ (i.e. - setting the **origin** of the light), which is currently my main problem without doing the complicated steps I described in my original post that involve intermediary objects whose position I can set and using those as proxy to properly set the origin of the spotlight…

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [November 5, 2022, 7:53pm UTC](https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360/5 "2022-11-05T19:53:54Z")

</div>

You can set the light.position to any point you specify, a point light will always “lookAt” it’s target if that’s what you’re referring to as a rotation, you can parent the light to another object as you’ve suggested if you’d like to keep the position of both relative but essentially you’d just need to move both the light to the required position and light.target to an arbitrary position “in front” of it / where you’d like it to “look”

---

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [November 5, 2022, 10:50pm UTC](https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360/6 "2022-11-05T22:50:26Z")

</div>

> [@Lawrence3DPK](#):
>
> but essentially you’d just need to move both the light to the required position and light.target to an arbitrary position “in front” of it / where you’d like it to “look”

My understanding is that if you don’t attach the spotlight to another object, it’s position is at the center of the scene, hence my comment at the top of this thread about the spotlight `position` property feeling more like a rotation angle than a position property. Do I have that right? Your comment that I quoted in this reply seems to indicate that there _is_ a way to move the spotlight to a specific place in the scene and if so, I can’t figure out how to do that without attaching the spotlight to some other object.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [November 6, 2022, 9:34am UTC](https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360/7 "2022-11-06T09:34:08Z")

</div>

> [@MeJayEss](#):
>
> My understanding is that if you don’t attach the spotlight to another object, it’s position is at the center of the scene, hence my comment at the top of this thread about the spotlight `position` property feeling more like a rotation angle than a position property. Do I have that right?

Not sure where you’ve gotten this assumption… Once added to the scene graph can be moved to any point in the scene…

> [@MeJayEss](#):
>
> seems to indicate that there _is_ a way to move the spotlight to a specific place in the scene

Yes spotlight.position.set(x,y,z) as with any other positional property in THREE…

Have you considered using a light helper to visualise what’s going on with the position of the spotlight? See [this](https://threejs.org/examples/?q=Light#webgl_lights_spotlights) example…

---

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [November 8, 2022, 6:19am UTC](https://discourse.threejs.org/t/is-the-spotlight-the-right-tool-for-simulating-multiple-stage-lights/44360/8 "2022-11-08T06:19:19Z")

</div>

Thanks, I’ll look at that. In the meantime, here is the current problem I’m having with the spotlight as an attachment. If you have any ideas on what I’m doing wrong, I’d like to know:

> [@Spotlight attached to object doesn't move with the object?](https://discourse.threejs.org/t/spotlight-attached-to-object-doesnt-move-with-the-object/44446):
>
> I have a camera drone animation model that I attach two objects to. The camera drone is just a black sphere with a texture. I attach a red sphere to the camera drone where the lens appears on its textureis, to make it look like a security camera lens. Works great. When I move the model, the red sphere moves with the camera drone perfectly as it moves and rotates. However, I also attach a spotlight at the exact same place on the camera drone object. My desire is to have the spotlight beam c…