three.js - Multiple scenes on different canvases -

i'm trying create 2 scenes on 2 different canvases. possible in three.js?

var scene1 = new three.scene() var scene2 = new three.scene() scene1.add(camera1) scene2.add(camera2) 

...

renderer.render(scene1, camera1) renderer.render(scene2, camera2) 

will work that?

yes - totally possible, renderer-instance bound webglcontext of canvas. need create create renderer every canvas have. be

renderer1.render(scene1, camera1); renderer2.render(scene2, camera2); 

(the other way around works well: can use multiple renderers render same scene different cameras)

edit based on comments

you can render multiple scenes different regions of same canvas, using 1 renderer. need setup different viewport , scissor-test every scene (based on https://threejs.org/examples/#webgl_multiple_views)

// first, render scene normally: camera.aspect = totalwidth / totalheight; camera.updateprojectionmatrix(); renderer.setviewport(0, 0, totalwidth, totalheight); renderer.setscissortest(false); renderer.render( scene1, camera1 );  // then, render overlay renderer.setviewport(left, bottom, width, height); renderer.setscissor(left, bottom, width, height); renderer.setscissortest(true); renderer.setclearcolor(view.background);  camera.aspect = width / height; camera.updateprojectionmatrix(); renderer.render( scene2, camera2 );