Rotating light source with camera + OrbitControls.js

Question

I've set up a scene in Three.js with OrbitControls.js to allow for rotation and panning. I would like my lighting set-up to follow the camera, ensuring that the object in the scene is always illuminated. (Right now you can rotate to the "dark side" of the object).

I've tried to solve this problem by making each light a child of the camera:

scene.add(light);
camera.add(light);

However, this produce the desired effect. The only other way I can think of solving this problem is by keeping track of the camera's change in spherical coordinates and making the lights match those changes (but this is undesirable for a myriad of reasons).

I'm relatively new to Three.js so I'm hoping there is an easy solution that I'm just unfamiliar with. Thanks!

It is probably best for you to use a PointLight. See if scene.add( camera ); camera.add( light ); is sufficient for your needs. three.js r.67 — WestLangley
– WestLangley, Commented Jun 20, 2014 at 1:02
@WestLangley I"m currently using PointLight, and it still isn't moving with the camera despite being listed (in DevTools) as a child of the Camera. Here's my function for adding lights to the scene: function createLight(color, intensity, position) { var light = new THREE.PointLight(color, intensity); light.position = position; light.distance = 0; scene.add(light); camera.add(light); (Sorry for formatting issues, not sure how to make it display properly) — HighSkyd
– HighSkyd, Commented Jun 20, 2014 at 2:38
You did not follow my instructions: scene.add( camera ); camera.add( light );. — WestLangley
– WestLangley, Commented Jun 20, 2014 at 3:25
To anyone reading this who may have missed the distinction, adding the light to scene was my problem. Only add the light to the camera — HighSkyd
– HighSkyd, Commented Jun 20, 2014 at 3:57

WestLangley · Accepted Answer · 2014-06-20 03:44:29Z

6

If you want you light to follow the camera, you can use a PointLight with the following pattern:

scene.add( camera );
camera.add( light );

three.js r.67

answered Jun 20, 2014 at 3:44

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rotating light source with camera + OrbitControls.js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related