title: How to fit the size of the three.js renderer to a webpage element?
body: <p>I need to fit the size of the renderer to the size of an element on the webpage. Doing <code>renderer.setSize(window.innerWidth, window.innerHeight)</code> sets the size of the renderer to fit the whole window. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>init() {
        let map = document.getElementById('map');
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color( 0xf0f0f0 );
        this.camera = new THREE.PerspectiveCamera(
          75,
          //window.innerWidth / window.innerHeight,
          1341/958, //hardcoded for now, but needs to be automatic
          0.1,
          1000,
        );
        this.camera.position.z = 3;
        this.renderer = new THREE.WebGLRenderer();
        //this.renderer.setSize(window.innerWidth, window.innerHeight); // it should not be a whole window
        this.renderer.setSize(1341,958); //hardcoded for now, but needs to be automatic
        map.appendChild(this.renderer.domElement);}</code></pre>
  </div>
  </div>
  </p>
  
  <p>EXPECTED: if you uncomment the comments the whole renderer takes the size of the whole window.</p>
  
  <p>ACTUAL: I had to hardcode the dimensions myself, but it is just a hotfix :(</p>