How to make camera update on zoom - three.js

Question

I finally found how to zoom with the mousescroll, but the camera only updates the zoom level when I move the camera by clicking and dragging.
I tried copy pasting code from three.js examples, I tried different browers, I tried adding controls.update(); to both the render and the gameloop function and I tried Googling my issue.
var renderer = new THREE.WebGLRenderer( );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// check when the browser size has changed and adjust the camera accordingly
window.addEventListener( 'resize', function( )
{
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
renderer.setSize( WIDTH, HEIGHT );
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix( );
} );
scene.add( new THREE.AmbientLight( 0x00020 ) );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use only if there is no animation loop
controls.minDistance = 10;
controls.maxDistance = 200;
controls.enableZoom = true;
camera.position.z = 7;
// CUBE
var geometry = new THREE.CubeGeometry( 2, 2, 2 );
var cubeMaterials =
[
new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'img/1.png' ), side: THREE.DoubleSide } ), // Right side
new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader( ).load( 'img/2.png' ), side: THREE.DoubleSide } ), // Left side
new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'img/3.png' ), side: THREE.DoubleSide } ), // Top side
new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader( ).load( 'img/4.png' ), side: THREE.DoubleSide } ), // Bottom side
new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'img/5.png' ), side: THREE.DoubleSide } ), // Front side
new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader( ).load( 'img/6.png' ), side: THREE.DoubleSide } ) // Back side
];
// Create a MeshFaceMaterial, which allows the cube to have different materials on each face
var cubeMaterial = new THREE.MeshFaceMaterial( cubeMaterials );
var cube = new THREE.Mesh( geometry, cubeMaterial );
scene.add( cube );
// Floor
var floorGeometry = new THREE.CubeGeometry( 496, 1, 350 );
var floorMaterial = new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'images/ctr.png' ), side: THREE.DoubleSide } );
var floorCube = new THREE.Mesh( floorGeometry, floorMaterial );
floorCube.position.y = -5;
scene.add( floorCube );
var ambientLight = new THREE.AmbientLight( 0xFFFFFF, 5.0 );
scene.add(ambientLight);
var light1 = new THREE.PointLight( 0xff0040, 4, 50 );
//scene.add( light1 );
var light2 = new THREE.PointLight( 0x0040ff, 3, 50 );
//scene.add( light2 );
var light3 = new THREE.PointLight( 0x80ff80, 4, 50 );
//scene.add( light3 );
var directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 1 );
directionalLight.position.set( 0, 1, 0 );
//scene.add( directionalLight );
var spotLight = new THREE.SpotLight( 0xFF45F6, 25 );
spotLight.position.set( 0, 3, 0 );
scene.add( spotLight );
// game logic
var update = function( )
{
//cube.rotation.x += 0.01;
//cube.rotation.y += 0.005;
var time = Date.now( ) * 0.0005;
light1.position.x = Math.sin( time * 0.7 ) * 30;
light1.position.y = Math.cos( time * 0.5 ) * 40;
light1.position.z = Math.cos( time * 0.3 ) * 30;
light2.position.x = Math.cos( time * 0.3 ) * 30;
light2.position.y = Math.sin( time * 0.5 ) * 40;
light2.position.z = Math.sin( time * 0.7 ) * 30;
light3.position.x = Math.sin( time * 0.7 ) * 30;
light3.position.y = Math.cos( time * 0.3 ) * 40;
light3.position.z = Math.sin( time * 0.5 ) * 30;
};
// draw scene
var render = function( )
{
renderer.render( scene, camera );
};
// run game loop (update, render, repeat)
var GameLoop = function( )
{
requestAnimationFrame( GameLoop );
update( );
render( );
};
GameLoop( );
</script>
I would really love to be able to zoom in instantly when I scroll and not have it update only when I perform a pan.