threejs: rendering multiple scenes in a single web

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!

Answer 1

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);
};