Sunday, January 20, 2013

Still Can't Get Two Three.js Scenes Rendered

‹prev | My Chain | next›

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:
  var moon_orbit = new THREE.Object3D();
  moon_orbit2 = moon_orbit.clone();
  moon.position.set(0, 100, 0);

  var moon2 = moon.clone();
  earth_cam.rotation.set(Math.PI/2, 0, 0);
  earth_cam2.rotation.set(Math.PI/2, 0, 0);
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.

I should probably cut my losses here and move onto to other games and such for Gaming JavaScript. Then again, I really feel like this ought to be possible so I may give it one more shot tomorrow.

Day #636


  1. This capability would be a major boon for three.js. Thanks for blogging about your attempts.

    1. I think I got it working: Not perfect, but it seems to work :)