threejs: rendering multiple scenes in a single webgl renderer

Question

I am trying to include multiple scene into a single webgl renderer as per code below:

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

I am facing issue where in the last scene object that is passed to the renderer is being painted and the previous one is not. I confirmed it by swapping the above two lines of code. I am newbie to threejs and would like to know if the above can be achieved? and also if you can guide me towards supporting examples (if any).

Thanks!

See http://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs/12666937#12666937 — WestLangley, May 16 '15 at 06:28
Thanks @WestLangley! the reference was helpful, finally got my example to work. — DSH, May 18 '15 at 01:44

score 7 · Answer 1 · answered Jan 17 '19 at 13:13

7

The minimal solution you can find here: https://jsfiddle.net/mmalex/sqg0d8vx/

var animate = function() {
    requestAnimationFrame(animate);

    renderer.autoClear = true;

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

    //prevent canvas from being erased with next .render call
    renderer.autoClear = false;

    //just render scene2 on top of scene1
    renderer.render(scene2, camera);
};

answered Jan 17 '19 at 13:13

Alex Khoroshylov

2,234
1
17
28

1

The objects from both scenes still intersect. How do you make scene2 render on top of scene1 (so it is like two layers)? – trusktr Oct 08 '20 at 07:25
1

insert "renderer.clearDepth();" right before you render the second scene https://jsfiddle.net/7g3dkuwq/ – Jmschrack Jun 14 '21 at 21:30

threejs: rendering multiple scenes in a single webgl renderer

1 Answers1