title: Render Three.js into a div element
body: <p>I am using Three.js. Having a html site with two div elements, is it possible to render just in one div element?  </p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="twocols"&gt;
          &lt;div id="detailinfo"&gt;
              &lt;span class="c"&gt;Detailinformationen:&lt;/span&gt;&lt;br/&gt;
              &lt;span id="tb" class="g"&gt;&lt;/span&gt;&lt;br/&gt;
              &lt;span class="c"&gt;Grafiken:&lt;/span&gt;
              &lt;div id="chart"&gt;&lt;/div&gt;
              &lt;div id="chart2"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="city"&gt;
          &lt;/div&gt;                  
      &lt;/div&gt;      
  &lt;/body&gt; 
  </code></pre>
  
  <p>I want to render into the city div.</p>
  
  <p>Three.js Code:</p>
  
  <pre><code>function initScene() {
  
              //container = document.createElement('div');
              //document.body.appendChild(container);
  
              scene = new THREE.Scene();
              createCamera();
              createLight();
              createProjector();
              createRenderer();
              createControls();
  
              //...
          }
  </code></pre>
  
  <p>createRenderer:</p>
  
  <pre><code>function createRenderer() {
              renderer = new THREE.WebGLRenderer({
                  antialias : ANTIALIAS, 
                  preserveDrawingBuffer : DRAWINGBUFFER
              });
  
              renderer.setSize(document.getElementById("city").offsetWidth, document.getElementById("city").offsetHeight);
              document.getElementById("city").appendChild(renderer.domElement);
  
              THREEx.Screenshot.bindKey(renderer); // add the printscreen shortcut with "p"
          }
  </code></pre>
  
  <p>createControls:</p>
  
  <pre><code>function createControls() {
              controls = new InteractionManager(camera, document.getElementById("city"));
              //...
          }
  </code></pre>
  
  <p>InteractionManager.js</p>
  
  <pre><code>initialize: function(camera, domElement) {
  
      this.object = camera;
      this.domElement = (domElement !== undefined) ? domElement : document;
      this.target = new THREE.Vector3( 0, 0, 0 );
      //this.chartManager = new ChartsManager();
  
      if ( this.domElement === document ) {
          this.viewHalfX = window.innerWidth / 2;
          this.viewHalfY = window.innerHeight / 2;
      } else {
          this.viewHalfX = this.domElement.offsetWidth / 2;
          this.viewHalfY = this.domElement.offsetHeight / 2;
          //alert(domElement.offsetWidth + "  " + domElement.offsetHeight);
          //this.domElement.setAttribute( 'tabindex', -1 );
      }
  
      //...
  },
  </code></pre>
  
  <p>so far..</p>