Resizing view in three.js shrinks image
<p>I am trying to create an online 3D manipulation tool. I have got my THREE.js view set up with a rotating cube and a grid. When I run the code it works 100% fine, but if I resize the view it does not adjust the THREE.js screen with it. (It shrinks the length or width of the scene depending on how the browser view changes.) causing to view to look distorted.</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>$(function(){
 
 var scene = new THREE.Scene();
 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 500);
 var renderer = new THREE.WebGLRenderer();
 
 renderer.setClearColor(0xdddddd);
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.shadowMap.enabled = true;
 renderer.shadowMapSoft = true;
 
 var axis = new THREE.AxisHelper(10);
 scene.add(axis);
 
 var color = new THREE.Color("rgb(255,0,0)");
 var color2 = new THREE.Color(0xd3d3d3);
 var grid = new THREE.GridHelper(50, 15, color, color2);
 
 scene.add(grid);
 
 var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
 var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3300});
 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
 
 /*var planeGeometry = new THREE.PlaneGeometry(30, 30, 30);
 var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
 var plane = new THREE.Mesh(planeGeometry, planeMaterial);
 
 plane.rotation.x = -.5*Math.PI;
 plane.position.y = -.1
 plane.recieveShadow = true;
 
 scene.add(plane);*/
 
 cube.position.x = 2.5;
 cube.position.y = 4;
 cube.position.z = 2.5;
 cube.castShadow = true;
 
 scene.add(cube);
 
 var spotLight = new THREE.SpotLight(0xffffff);
 spotLight.castShadow = true;
 spotLight.position.set(15, 30, 50);
 
 scene.add(spotLight);
 
 camera.position.x = 40;
 camera.position.y = 40;
 camera.position.z = 40;
 
 camera.lookAt(scene.position);
 
 var guiControls = new function(){
  this.rotationX = 0.01;
  this.rotationY = 0.01;
  this.rotationZ = 0.01;
 }
 
 var datGUI = new dat.GUI();
 datGUI.add(guiControls, 'rotationX', 0, 1);
 datGUI.add(guiControls, 'rotationY', 0, 1);
 datGUI.add(guiControls, 'rotationZ', 0, 1);
 
 render();
 function render() {
        //Me trying to reset the camera view every render
  camera.fov = 45
  camera.aspect = window.innerWidth / window.innerHeight
  camera.near = .1
  camera.far = 500
  scene.add(camera);
  cube.rotation.x += .1;
  renderer.setSize(window.innerWidth, window.innerHeight);
  requestAnimationFrame(render);
  renderer.render(scene, camera);
 }
 
 $("#world").append(renderer.domElement);
 renderer.render(scene, camera);
});</code></pre>
</div>
</div>
</p>