title: is it possisble to use two cameras and two canvases
body: <p>first canvas, id="main", set to window size. camera for this canvas is attached to an object so that it can be moved with the arrow keys like you are say driving, start position(x,y,z) would be 0,0,25. This works fine. second canvas, id="radar", set to 150 x 150, is positioned absolute to bottom:0 and left:0. The second camera is an overhead, start position(x,y,z) would be 0,110,0 and rotation.x -1.75. This also works. How can I get them to both work at same time.</p>
  
  <p>here is the code</p>
  
  <pre><code>    echo'function createRenderer(){';
          echo'renderer = new THREE.WebGLRenderer({antialias: true});';
          echo'renderer.setClearColor(0xffffff);'; 
          echo'renderer.setSize( window.innerWidth, window.innerHeight );';
          echo'main = renderer.domElement;';
          echo'main.id = "main";';
          echo'AddElem(GetElem("body"),main);';
      echo'}';
  
      echo'function createRadar(){';
          echo'radar = CreateElem("canvas");';
          echo'radar.id = "radar";';
          //echo'context = radar.getContext("2d");';
          echo'AddElem(GetElem("body"),radar);';
      echo'}';
  
      echo'function cameras(){';
          echo'sphere0 = new Sphere(0,0,0);';
          echo'sphere0.id="s0";';
          echo'scene.add(sphere0);';
          echo'camera1 = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);';
          echo'camera1.matrixAutoUpdate = true;';
          echo'Controls.init(sphere0,camera1,0,0,25);';
  
          echo'camera2 = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);';
          echo'camera2.position.x = 0;';
          echo'camera2.rotation.x = -1.75;';                          
          echo'camera2.position.y = 110;';
          echo'camera2.position.z = 0;';                                                          
          echo'scene.add(camera2);';
      echo'}';
  
      echo'function render() {'; 
          echo'requestAnimationFrame( render );';
          echo'camera2.lookAt(sphere0.position);';
  
          echo'Controls.update();';
          echo'camera2.position.x = sphere0.position.x;';
          echo'camera2.position.z = sphere0.position.z;';
          echo'camera2.updateProjectionMatrix();';
          //echo'renderer.clear();';                          
  
          echo'renderer.setViewport(1,1,148,148);';
          echo'renderer.setRenderTarget(radar);';
          echo'renderer.render(scene, camera2);';
  
          echo'renderer.setViewport(0,0,window.innerWidth, window.innerHeight);';
          echo'renderer.setRenderTarget(main);';
          echo'renderer.render(scene, camera1);'; 
      echo'}';
  </code></pre>