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