I would like to be able to change the rotation of spotlights in the threejs editor. Currently I’m setting up the lighting of my scene with code but it’s a bit of a hassle. Furthermore I would like to offset the work of lighting to the scene to some of our artists.
I’d like to contribute to this project and I could probably do a pull request, but before I do I would like find out if there maybe already is a way to easily rotate spotlights in the editor. That way I’m not implementing something unnecessary.
Does anyone know if there’s an easy way to do this already?
Rotating a spotlight or directional light has no effect. These lights shine from their position towards the light.target, which by default is at (0,0,0). To adjust the position of the target you need to set the target’s position, and add it to the scene.
Alternatively, you can use another object in the scene if you just need the light to shine onto something.
Looking at the editor interface now, I don’t think there’s any way to set the position of the light’s target, unless I’m missing something.
Cool, thanks for the info! I’ll try to implement this then. I was thinking of adding a button to the sidebar to create an object and set it as target of the light. Being able to rotate lights using rotation controls would be nice but I’m not sure how easy that’s going to be.
I’m also not sure how importing and exporting is going to behave, but I should probably make this workas well.
Perhaps created lights using the context menu should have a target in the scene by default? I’m not sure, I think adding a button to the sidebar is the most elegant solution. But if anyone has any better ideas please let me know.
Hi, I’ll plus one this issue. I understand how this works in three.js. But in other engines rotating the spotlight rotates where it is directed. The “spotlight” itself is borrowed from the real world. I believe that it should operate like its real world model. In the real world you spin the spotlight around to find “focus” on something.
At very least since the Three.js editor is meant to provide a UI way to create and manipulate scenes that the Spotlight “target” should be exposed somehow. Perhaps in the inspector as X,Y,Z coordinates. Or as a displayed child (or maybe parent) of the spotlight itself. So when selected it can be transformed by dragging.
As it is there is no way to “focus” the spotlight in the editor, rendering it kind of useless.
In the real world, spotlights tend to be used to focus on a particular object. This is easier to do if you give it a target to focus on, instead of having to calculate the necessary rotation manually.
I do agree that it would be nice to be able to edit this directly in the editor though.
Well, I work in the theater so my perspective on spotlights is deeply informed by that.
In a theatrical setting, where the idea of a spotlight comes from, spotlights are sometimes focused directly at an object but more often they are just used to wash an area with light. Things pass through the light.
Imagine the frustration that you model a physical spotlight, child a “light” spotlight to it. But when you rotate the physical spotlight the attached emitting spotlight doesn’t rotate with it. It’s like, wtf.
(I can only imagine the frustration those people modeling cars and just trying to stick a spotlight on the front of their car only to find the light doesn’t track with the car!)
In my use case we are creating theatrical visualization. The light control inputs, via DMX, are instructions to the spotlight to pan/tilt (left/right, up/down). We do not provide the spotlight a physical cartesian coordinate to point at; no, we spin it around, tip it up and down till it is pointing where we want it.
I am also familiar with world building in Unreal and Godot. And in both those engine the spotlight can be rotated. I just feel the three.js spotlight was created with limited familiarity with what they are.
Tagets should absolutely be an option, but when no target is specified a spotlight should be able to transform direction via rotate.
Spot lights in Three.js can be rotated by manipulating rotation property of 3D projector object. The trick is to put the target and the light both in the projector object, and then just rotate the projector.
Here is a proof-of-concept (see lines 76-80):
function animationLoop( t )
{
projector.rotation.z = t/1000;
renderer.render( scene, camera );
}
If you want to rotate a light, you’ll also need to reposition its target as @looeee mentioned.
Something like…
light.rotation.y += 1;
light.updateMatrixWorld()
let dist = light.target.position.distanceTo(light.position)
light.target.position.set(0,0,dist).applyQuaternion(light.quaternion)
light.target.updateMatrixWorld()
It sounds counterintuitive but once you embrace the architecture, it can simplify a lot of the operations you need to do with lights, or any “thing that usually points at some other thing”
OrbitControls uses a similar principle with its .target point.
You can add the lights target to the scene if you want. You can also add the target to another object if you want the light to point at that object… or indeed I think you can even replace the light.target = someOtherObject.
