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

Questions
1

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:

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?

2

Read the documentation on spotlight specifically the .target property…
Also watch out for performance drops using many spotlights

3

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
22294×1240 63.9 KB

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

1
12294×1240 107 KB

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 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:

the article which explains how to do that is here: john-chapman-graphics: "Good Enough" Volumetrics for Spotlights

4

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…

5

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”

6

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.

7

Not sure where you’ve gotten this assumption… Once added to the scene graph can be moved to any point 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 example…

8

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: