Same scene with two differents camera

Questions
,
1

Hi,

I have a three.js scene that I want to show from two points of view.
So far I created two canvas, create two renders reffering to this canevas
then set the camera and the scence to each renderer. In pseudo code:

canvas1 = document.querySelector(“#c1”)
canvas2 = document.querySelector(“#c2”)
camera1 = new THREE.OrthographicCamera(…)
camera2 = new THREE.OrthographicCamera(…)
renderer1 = new THREE.WebGLRenderer(…)
renderer2 = new THREE.WebGLRenderer(…)

renderer1.render(myscene, camera1)
renderer2.render(myscene, camera2)

So far so good I have a 2 visualisations of the same scene with two differents point of view.
But I’d like to have some objects that can are visible with the camera1 and not with the camera 2.
How can I archive this please?

2

Quite many ways to do it. You can create 2 (or more) groups and just toggle them in-between specific .render calls for example (based on how Blender does it):

const baseCollection = new Group();
const overlayCollection = new Group();

scene.add(baseCollection);
scene.add(overlayCollection);

// NOTE Add models to either base collection or overlay collection instead of directly adding to the scene 

baseCollection.add(object1);
overlayCollection.add(object2);

// NOTE Render all collections
renderer1.render(scene, camera);

// NOTE Render only overlay collection
baseScene.visible = false;
renderer2.render(scene, camera);

// NOTEReset all collections to visible
baseScene.visible = true;
overlayCollection.visible = true;
1 Like
3

Thanks!
With this solution I archived what I wanted.

For my information, can you tell me what the others solution you were thinking about?