Zoom in and out to specific points in the scene THREE.js and TWEEN.js

Question

I am trying to zoom all the way inside this cube from the outside (I am using tween.js to do this), the zoom distance is fine and all, however as you can see in the code snippet the camera does not actually zoom in to the cube the cube will just fly past the camera, then after that happens if you click anywhere on the window it (the cube) will snap back into place. These unwanted events only occur once Orbit Controls are added. I really can not wrap my brain around this one. Any help would be much appreciated. (Just run the code snippet fullscreen)

let camera, renderer, scene, controls, cube;

function init(){
  
  // scene renderer and camera
  const canvas = document.getElementById("canvas");
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(10, 2, 20, 200);
  renderer = new THREE.WebGLRenderer({ canvas, antialias: true});
  camera.position.set(0, 0, 170);
  
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enablePan = false;
  controls.enableZoom = false;

  // cube geometry
  const geometry = new THREE.BoxGeometry( 10, 10, 10 );
  const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  cube = new THREE.Mesh( geometry, material );
  cube.position.set( 0, 0, 0);
  scene.add( cube );
  
  // edges geometry
  var edgeGeometry = new THREE.EdgesGeometry( cube.geometry ); // or WireframeGeometry
  var edgeMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
  edges = new THREE.LineSegments( edgeGeometry, edgeMaterial );
  cube.add( edges );

  renderer.render(scene, camera);
  
  animate();
};

function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    cube.rotation.y += 0.0003;
    cube.rotation.x += 0.0003;
    TWEEN.update();
}

init();

var scrollEvent = 0;
window.addEventListener('wheel', function(event)
{
 if ((event.deltaY < 0) && scrollEvent >= 1)
 {
  var xTarget = 0;
        var yTarget= 0;
        var zTarget= 170;
        var tweenDuration=0;

        function panCam(xTarget,yTarget,zTarget,tweenDuration){

          TWEEN.removeAll();

          var camNewPosition= { x : xTarget, y : yTarget, z : zTarget};
          var targetNewPos = {x : xTarget, y : yTarget, z : 0};

          var camTween = new TWEEN.Tween(camera.position).to(camNewPosition, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut)
           .onComplete(function() {
               camera.position.copy(camNewPosition);
            })
          .start();
          var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut)
            .onComplete(function() {
                controls.target.copy(targetNewPos);
            })
          .start();
    }
    panCam(0,0,170,1000); 
    scrollEvent = 0;
 }
 else if (event.deltaY > 0 && scrollEvent == 0)
 {
    scrollEvent += 1;

    var xTarget = 0;
        var yTarget= 0;
        var zTarget= 20;
        var tweenDuration=0;

        function panCam(xTarget,yTarget,zTarget,tweenDuration){

          TWEEN.removeAll();

          var camNewPosition= { x : xTarget, y : yTarget, z : zTarget};
          var targetNewPos = {x : xTarget, y : yTarget, z : 0};

          var camTween = new TWEEN.Tween(camera.position).to(camNewPosition, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut)
           .onComplete(function() {
               camera.position.copy(camNewPosition);
            })
          .start();
          var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut)
            .onComplete(function() {
                controls.target.copy(targetNewPos);
            })
          .start();     
    }
    panCam(0,0,20,1000); 
 }});

body{
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #f1f1f1;
}

.scene,
canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://sole.github.io/tween.js/build/tween.min.js"></script>

<canvas id="canvas"></canvas>