Threejs根据鼠标动态改变controls的target（缩放中心点）

好久没更新博客了，记下一笔
最近看到很多公司的产品的鼠标交互部分，controls的缩放中心不是固定的，比如这个，这个鼠标的交互方式跟我们平常用到的OrbitControls或者TrackballControls都不一样，特别是缩放时，它的target不是固定的，最近研究了一下：
废话不多说，先上图：
普通的缩放操作
优化后的缩放操作
代码如下：

$('body').on('mousewheel', function ( ev ){

        var factor = 3;

        var WIDTH = window.innerWidth;
        var HEIGHT = window.innerHeight;

        //将鼠标的屏幕坐标转换为NDC坐标
        var mX = ( ev.clientX / WIDTH ) * 2 - 1;
        var mY = - ( ev.clientY / HEIGHT ) * 2 + 1;

        //这里定义深度值为0.5，深度值越大，意味着精度越高
        var vector = new THREE.Vector3(mX, mY, 0.5 );
        //将鼠标坐标转换为3D空间坐标
        vector.unproject(camera);

        //获得从相机指向鼠标所对应的3D空间点的射线（归一化）
        vector.sub( camera.position ).normalize();

        if( ev.originalEvent.deltaY < 0 ){
            camera.position.x += vector.x * factor;
            camera.position.y += vector.y * factor;
            camera.position.z += vector.z * factor;
            controls.target.x += vector.x * factor;
            controls.target.y += vector.y * factor;
            controls.target.z += vector.z * factor;
        } else{
            camera.position.x -= vector.x * factor;
            camera.position.y -= vector.y * factor;
            camera.position.z -= vector.z * factor;
            controls.target.x -= vector.x * factor;
            controls.target.y -= vector.y * factor;
            controls.target.z -= vector.z * factor;
        }
    });

参考：
http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works