title: Problems rendering a list of threeJs renderers
body: <p>I'm attempting to display a list of renderer/scene/camera "groups" on the same html page. I ran into problems when trying to implement a render loop on all of them, using requestAnimationFrame. I am, however, unable to successfully render even a single frame by looping over the list.</p>
  
  <p>calling renderer.render on each of the "groups" in the same function that I instantiate them in works fine. I refactored the code to allow calling render on each of the renderers outside of said function, and my blue spheres disappear;</p>
  
  <p>I have some elements...</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;div class="1"&gt;&lt;/div&gt;
   &lt;div class="2"&gt;&lt;/div&gt;
   &lt;div class="3"&gt;&lt;/div&gt;
   &lt;div class="4"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>that I add some threeJs things to</p>
  
  <pre><code>$(document).ready(function(){
      addResizeandCenterListener(window, $("#container"), 4/3);
      addResizeListener($("#container"), $(".playerhalf"), 2/1);
      for (let item of [".1", ".2", ".3", ".4", ".5", ".6", ".7", ".8"]) {
          var threeDetails = addThreeRendererToElem($(item), item);
          var scene = threeDetails["scene"];
          addClickListenerToElem($(item), scene);
      }
  });
  </code></pre>
  
  <pre><code>threeList = [];
  
  //this adds a renderer/scene/camera to the element "elem"
  function addThreeRendererToElem(elem, name){
      var width = elem.innerWidth();
      var height = elem.innerHeight();
      var scene = newScene();
      scene.name = name;
      addDefaultLight(scene);
      addBlueBall(scene);
      var camera = addDefaultCamera(scene, width, height);
      var renderer = newRenderer(width, height);
      elem[0].appendChild(renderer.domElement);
      //this works fine regardless of how many renderer/scene/camera groups I have placed in the DOM
      //renderer.render(scene, camera);
      var threeDict = {"renderer":renderer, "scene":scene, "camera":camera}
      threeList.push(threeDict)
      //this does not work, even if I only place a single renderer/scene camera group in the DOM
      renderList();
  }
  
  function renderList() {
      var tlist = threeList;
      for (var i = 0; i&lt; tlist;i++) {
          var threeDict = tlist[i];
          threeDict["renderer"].render(threeDict["scene"], 
                                       threeDict["camera"]);
      }
  }
  
  function newScene(){
      scene = new THREE.Scene();
      return scene;
  }
  
  function newCamera(w, h){
      camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 100);
      return camera;
  }
  
  function newRenderer(w, h){
      renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
      renderer.setSize(w, h);
      return renderer;
  }
  
  function addObjectToScene(obj, scene){    
      scene.add(obj);
  }
  
  function ballObj(color){
      var ballGeometry = new THREE.SphereGeometry(3, 16, 16);
      var ballMaterial = new THREE.MeshPhongMaterial({color: 0x33aaff});
      var ball = new THREE.Mesh(ballGeometry, ballMaterial);
      return ball;
  }
  
  function spotLightObj(){
      var spot = new THREE.SpotLight(0xffffff);
      return spot;
  }
  
  function addDefaultCamera(scene, width, height){
      var camera = newCamera(width, height);    
      camera.position.set(1,1,20);
      camera.lookAt(scene.position);
      return camera;
  }
  
  function addDefaultLight(scene){    
      var spot = spotLightObj();
      spot.position.set(1, 10, 4);
      addObjectToScene(spot, scene);
  }
  
  function addBlueBall(scene){
      var hexcolor = "0x33aaff";
      bball = ballObj(hexcolor);
      addObjectToScene(bball, scene);
  }
  </code></pre>
  
  <p>I expect to see some blue spheres, like when I am calling render from inside addThreeRendererToElem, but I don't. Instead, the canvases are all blank. The canvases are in the correct places on the web page, inspecting threeList in the console shows that all the objects are indeed there. There are no error messages.</p>