I failed to get two Three.js renderers to display to the same screen yesterday. I tried multiple renderers, multiple cameras, different kinds of renderers, and different kinds of cameras. None of it worked. But there was one thing I did not try: multiple scenes. I have no idea if that is any more possible than multiple cameras and renderers, but there is one way to find out.
Unfortunately, it does not quite work out. I am still unsure if it is possible, but I definitely do not have it working. At some point during my refactoring, I started getting "WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost" errors and no longer saw any screen output at all.
My approach was to clone or recreate just about every aspect of the previous screen, so I ended up with a lot of code along the lines of:
With Earth-prime and Earth-2, I have something of a Crisis of Infinite Earths on my hands. Only the problem seems to be that I have lost the Earth, the Moon, the Sun and everything else.
var moon_orbit = new THREE.Object3D(); moon_orbit2 = moon_orbit.clone(); earth.add(moon_orbit); earth2.add(moon_orbit2); moon_orbit.add(moon); moon.position.set(0, 100, 0); var moon2 = moon.clone(); moon_orbit2.add(moon2); moon_orbit.add(earth_cam); earth_cam.rotation.set(Math.PI/2, 0, 0); earth_cam2.rotation.set(Math.PI/2, 0, 0); moon_orbit2.add(earth_cam2);