Three.js resize window not scaling properly - three.js

Question

When resizing the window, the shape does not scale properly.
I'm using the following code and according to the documentation, it should be just fine.
var camera, controls, scene, renderer, viewSize;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
viewSize = 20;
var aspectRatio = window.innerWidth / window.innerHeight
camera = new THREE.OrthographicCamera( -aspectRatio * viewSize / 2, aspectRatio * viewSize / 2, viewSize / 2, -viewSize / 2, 0.1, 1000 );
camera.position.x = 10;
camera.position.y = 10;
camera.position.z = -10
camera.lookAt(scene.position);
renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera , renderer.domElement);
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth , window.innerHeight);
}
makeShapes();
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
};
render();
As seen in the image above, the shapes get dragged out when the window gets bigger and vice versa.

Answer 1

The problem was solved by rescaling the left, right, top and bottom parameters of the camera proportionally to the window size. Now the object gets its viewSize and rescales the size depending on changes made to the window size.
var camera, scene, renderer;
var originalAspect;
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
var viewSize = 20;
var aspectRatio = window.innerWidth / window.innerHeight;
originalAspect = window.innerWidth / window.innerHeight;
camera = new THREE.OrthographicCamera(-aspectRatio * viewSize / 2, aspectRatio * viewSize / 2, viewSize / 2, -viewSize / 2, 0.1, 1000);
camera.position.set( 10, 10, -10 );
camera.lookAt(scene.position);
renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
var aspect = window.innerWidth / window.innerHeight;
var change = originalAspect / aspect;
var newSize = viewSize * change;
camera.left = -aspect * newSize / 2;
camera.right = aspect * newSize / 2;
camera.top = newSize / 2;
camera.bottom = -newSize / 2;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}

Answer 2

Try this:
var w = window.innerWidth;
var h = window.innerHeight;
var viewSize = 20;
var camera, scene, renderer;
camera = new THREE.OrthographicCamera( w / - 2 * viewSize, w / 2 * viewSize, h / 2 * viewSize, h / - 2 * viewSize, 0.1, 1000 );
camera.position.set( 10, 10, -10 );
camera.lookAt( scene.position );
renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
w = window.innerWidth;
h = window.innerHeight;
camera.left = w / - 2 * viewSize;
camera.right = w / 2 * viewSize;
camera.top = h / 2 * viewSize;
camera.bottom = h / - 2 * viewSize;
camera.updateProjectionMatrix();
renderer.setSize( w, h );
}