Three.js: Add camera to scene?

Created on 8 Jan 2012  路  14Comments  路  Source: mrdoob/three.js

A number of the examples do scene.add(camera), but a number of them don't. What's the use case for doing so?

Question

Most helpful comment

At a guess, it looks like by using push, which is a javascript function, instead of add, which is a method of THREE.Object3D, you are circumventing any lines of code that would have removed the pointlight from the first scene.

Essentially you are using a non-threejs approach to adding the pointlight to the second scene - which then breaks some of the threejs intended functionality.

There's nothing wrong with this of course - except you might run afoul of some behind-the-scenes functionality that is depending on that .add method being used. Some things may not function the way you'd expect them to, probably things that seem wholly unrelated to that pointlight.

All 14 comments

The camera will be added automatically if you don麓t add it to the scene. I believe when you麓re using only one camera it麓s ok but if you麓re using more then one you should at them.

Until recently the camera wasn't part of the scene graph. Because of that most of the example never add it to the scene so we do that automatically if the camera has no parent. Now a camera can be part of the scene graph, meaning that can be a child of an object. Imagine having a car on your scene and you want to put a camera on it.

Since not adding a camera to the scene is deprecated shouldn't all of the examples add the camera regardless?

I'd just like to note that the README's copy+paste example does not add the camera to the scene. It only caused me a minute of confusion, but it might be a good idea to fix it.

@egpaik As of r.50, the camera no longer needs to be added to the scene.

@WestLangley so, what is the correct answer? What if I have more than one scene?

@scganterh you can just do this:

renderer.render( scene1, camera );
renderer.render( scene2, camera );

@scganterh You do not have to add the camera to _any_ scene.

However, if you add a point light, for example, as a child of the camera, then you will want to add the camera as a child of the scene.

You can also add the camera as a child of another object if you want.

If I add a point light to my camera, the light takes effect only when I add the camera to the scene. This works great but in the case where i use the same camera (it having a point light) with two scenes, only the most recent scene that I added the camera to gains the camera-positioned point light.

This is evident by seeing that scene2.add(camera) causes scene1.children[] to lose that camera.

Here's where it gets interesting. If I then run scene1.children.push(camera) it works: both scene1 and scene2 now render using the pointlight that follows camera. If I use add instead of children.push though, the camera gets removed from scene2 then.

I don't know if it is dangerous or not to have different THREE scenes refer to the same object, but it does seem to work.

Also i find it confusing that even though i'm rendering using renderer.render(scene1, camera), when scene1's children does not contain that camera (e.g. because it got added to scene2), its pointlight is not utilized. (this being r88, it may be different in other builds)

All objects of type Camera are also of type Object3D. Such an object can only have a single parent. That's why adding a camera to two scenes is an invalid operation and does not work.

@unphased could you create a jsfiddle to illustrate your confusion?

Well, I think it's more aptly described as "unintuitive" than confusing. I think the "only having a single parent" constraint is at the root of it.

Turns out you can hack the pointlight-added-to-the-camera into having two parent scenes and it does work.

At a guess, it looks like by using push, which is a javascript function, instead of add, which is a method of THREE.Object3D, you are circumventing any lines of code that would have removed the pointlight from the first scene.

Essentially you are using a non-threejs approach to adding the pointlight to the second scene - which then breaks some of the threejs intended functionality.

There's nothing wrong with this of course - except you might run afoul of some behind-the-scenes functionality that is depending on that .add method being used. Some things may not function the way you'd expect them to, probably things that seem wholly unrelated to that pointlight.

Was this page helpful?
0 / 5 - 0 ratings