title: Changing proportionally the size of a geometry when the window size changes using onWindowResize() function
body: <p>I am making my first steps coding with javascript. I made some courses and now I am exploring the webgl world using Three.js</p>
  
  <p>I am experimenting with this function very used in all the examples of threes.org:</p>
  
  <pre><code>        function onWindowResize() {
  
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
  
            renderer.setSize(window.innerWidth, window.innerHeight);
  
          }
  </code></pre>
  
  <p>With this function I can center my geometry when I reduce or increase the width of my browser's window and I can make my geometry smaller or bigger when I reduce or increase the height of my browser's window.</p>
  
  <p>But now the thing is that when I reduce the height of my window I can see my geometry because it's centered and smaller. But when I reduce the width of my window I can't see all my geometry because it's centered but not smaller.</p>
  
  <p>In this example: <a href="http://codepen.io/gnazoa/pen/BjoBZz" rel="nofollow noreferrer">http://codepen.io/gnazoa/pen/BjoBZz</a> I tried to avoid this problem using <code>object.scale.devideScalar(1.5);</code> in my <code>onWindowResize()</code> function, but it doesn't makes a change.</p>
  
  <p>I am searching a solution for this because I consider it really important for a correct experience, because for the moment, I see this geometry in my desktop screen:</p>
  
  <p><a href="https://i.stack.imgur.com/AerXK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AerXK.png" alt="enter image description here"></a></p>
  
  <p>And this incomplete geometry in my iphone:</p>
  
  <p><a href="https://i.stack.imgur.com/nSrqN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nSrqN.png" alt="enter image description here"></a></p>
  
  <p>Do you have some suggestion? Is this problem something possible to solve?</p>