title: three.js dual viewports only one displays
body: <p>I have tried to clone Lee Stemkoski's excellent example of dual viewports at <a href="http://stemkoski.github.io/Three.js/Viewports-Dual.html" rel="nofollow">http://stemkoski.github.io/Three.js/Viewports-Dual.html</a>.</p>
  
  <p>It runs fine when accessed from its location on github on my local PC Windows 7 using Firefox 23.0.1.
  But when I copy the source and try to run it from my local drive it will only show the second viewport to be rendered.
  If I comment out the code for the second viewport rendering then it will show the first viewport OK.</p>
  
  <p>It may be a version problem.  I would have gotten the code from GitHub but it doesnt seem to be there.
  I obtained the source by doing "save as complete web page" from Firefox.
  To assist debugging I then minimized the javascript by progressively cutting out inessentials like stats, controls, information button.</p>
  
  <p>I have run out of ideas and wonder if anyone can see what the problem is .
  The last 11 lines of the underneath code block are where the action is.</p>
  
  <p>Cheers.</p>
  
  <p>=========================================================================================================================</p>
  
  <pre><code>&lt;!doctype html&gt; // based on Three.js "tutorials by example" Author: Lee Stemkoski Date: June 2012 (three.js v49)
  &lt;html lang="en"&gt;
  &lt;head&gt;
          &lt;title&gt; LIGER05 -- Three.js&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
  &lt;style&gt;
      body 
      {
          font-family: Monospace;
          font-weight: bold;
          background-color: #ccccff;
          margin: 0px;
          overflow: hidden;
      }
  &lt;/style&gt; &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- &lt;div id="message"&gt;&lt;/div&gt;--&gt;
  &lt;script src="js/Three.js"&gt;&lt;/script&gt;
  &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
  &lt;script src="js/Stats.js"&gt;&lt;/script&gt;
  &lt;script src="js/THREEx.KeyboardState.js"&gt;&lt;/script&gt;
  &lt;script src="js/THREEx.FullScreen.js"&gt;&lt;/script&gt;
  &lt;script src="js/THREEx.WindowResize.js"&gt;&lt;/script&gt;
  &lt;div id="ThreeJScontainer" style="position: absolute; left:0px; top:0px"&gt;&lt;/div&gt;&lt;!-- Pre-defined Container for rendered can
  &lt;script&gt;  // based on Three.js "tutorials by example" Author: Lee Stemkoski Date: June 2012 (three.js v49) --&gt;
  var container, scene, camera, camera2, renderer;
  init();
  animate();
  // FUNCTIONS //
  function init() {
  scene = new THREE.Scene();
  // CAMERA //
  var SCREEN_WIDTH = window.innerWidth , SCREEN_HEIGHT = window.innerHeight;  
  var VIEW_ANGLE = 45, ASPECT = (0.5*SCREEN_WIDTH) / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
  camera  = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
  camera2 = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
  scene.add(camera);
  scene.add(camera2);
  camera.position.set(0,0,200);
  camera2.position.set(0,250,0);
  camera.lookAt(scene.position);  
  camera2.lookAt(scene.position);     
  // RENDERER NEW
  if ( Detector.webgl )
      {renderer = new THREE.WebGLRenderer( {antialias:true} );}//alert("WebGL Renderer");         }
  else
      {renderer = new THREE.CanvasRenderer();}//alert("Canvas Renderer");         }
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  //...Either create a div element to contain the renderer        ==&gt; container = document.createElement( 'div' );
  container = document.getElementById( 'ThreeJScontainer' ); //...OR reference predefined container in the html
  container.appendChild( renderer.domElement );
  //Hmmmm   THREEx.WindowResize(renderer, camera);
  var light = new THREE.PointLight(0xffffff);
      light.position.set(0,250,0);
      scene.add(light);
      //var ambientLight = new THREE.AmbientLight(0x111111);
      // scene.add(ambientLight);
  var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 ); 
      // use a "lambert" material rather than "basic" for realistic lighting.//(don't forget to add &gt;= 1 light!)
      var sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x8888ff} ); 
      var sphere1 = new THREE.Mesh(sphereGeometry, sphereMaterial);
      sphere1.position.set(-60, 0, 50);
      scene.add(sphere1);  
      var sphere2 = new THREE.Mesh(sphereGeometry, sphereMaterial);
      sphere2.position.set(0, 0, -50);
      scene.add(sphere2);         
      var sphere3 = new THREE.Mesh(sphereGeometry, sphereMaterial);
      sphere3.position.set(60, 0, 50);
      scene.add(sphere3);                 
      }
  function animate() {
      requestAnimationFrame( animate );
  render();       
  update();   }
  function update() {
  // delta = change in time since last call (in seconds)
  var delta = clock.getDelta(); }
  function render(){  
  var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
  camera.aspect = (0.5 * SCREEN_WIDTH) / SCREEN_HEIGHT;
  camera.updateProjectionMatrix();
  camera2.aspect = (0.5 * SCREEN_WIDTH) / SCREEN_HEIGHT;
  camera2.updateProjectionMatrix();
  var mar = 100
  var panelX1min = mar
  var panelWidth = Math.floor(0.5 * SCREEN_WIDTH) - (2* mar)
  var panelX2min = mar + panelWidth + mar + mar
  var panelYmin = mar
  var panelHeight = SCREEN_HEIGHT - (2*mar)
  //...LEFT SIDE 
  renderer.setViewport( panelX1min, panelYmin, panelWidth , panelHeight  );
  renderer.render( scene, camera );
  //...RIGHT SIDE
  
      // ***** if you comment out the next two lines then the left side viewport will be shown *****
  
  renderer.setViewport( panelX2min, panelYmin, panelWidth, panelHeight ); 
  renderer.render( scene, camera2 );
  }
  &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
  =========================================================================================================================
  =========================================================================================================================
  </code></pre>