js判断鼠标靠近屏幕最侧面的监听_threejs按鼠标位置缩放场景

threejs的orbitcontrol，默认的缩放模式为整体以target为中心进行缩放。有时候，我们想让场景按照鼠标位置进行缩放，体验起来就和地图的缩放一样，最直观的感觉就是整个场景会越来越靠近鼠标点的位置，而不是整体的缩放大小。

问题描述

我们通过一个具体的例子来看看二者的区别。比如我们有如下场景，场景的相机target在平面的左下角，当我们缩放整个场景的时候，threejs的默认情况会整体按照target的位置缩放场景。

threejs默认缩放形式

可以看到，threejs默认的缩放形式，并没有考虑鼠标位置，也就是无论你鼠标放在那里，其实滚轮缩放的时候场景缩放的感觉是一样的。对比下下面的按鼠标点位置缩放，我们来看看。

按鼠标点位置缩放

从动图上我们可能看出来，以鼠标点为中心缩放的结果就是，我们鼠标点所在的位置被考虑进了缩放里。我们的缩放会让鼠标点所在的位置缩放的更大。这样更加符合用户的使用习惯，也就是用户鼠标所在的位置是用户更加关心的位置，希望相机更加偏向鼠标点的位置。

如何实现

ok，既然看完了对比，我们就来说下如何实现以鼠标点位置为缩放中心的场景缩放。我们以threejs中最常用的orbitcontrol为例子，来讲下如果达到我们想要的效果。

我们先来找到orbitcontrol中关于鼠标滚轮的处理函数，大致如下所示：

function handleMouseWheel( event ) {if ( event.deltaY < 0 ) {dollyIn( getZoomScale() );} else if ( event.deltaY > 0 ) {dollyOut( getZoomScale() );}scope.update();
}

可以看到这里滚轮处理的函数非常简单，判断下滚轮滚动的方向，然后执行缩放，最后更新control。

function handleMouseWheel( event ) {//设置相机缩放比数值越大缩放越明显let factor = 15;//从鼠标位置转化为webgl屏幕坐标位置let glScreenX = (event.clientX / scope.domElement.width) * 2 - 1;let glScreenY = -(event.clientY / scope.domElement.height) * 2 + 1;let vector = new Vector3(glScreenX, glScreenY, 0);//从屏幕向量转为3d空间向量vector.unproject(scope.object);//相机偏移量vector.sub(scope.object.position).setLength(factor);if (event.deltaY < 0) {scope.object.position.add(vector);scope.target.add(vector);} else {scope.object.position.sub( vector);scope.target.sub(vector);}scope.update();}

代码非常的简单，主要原理就是让相机沿着鼠标位置的偏移量进行偏移。（缩放只是拉近拉远相机）

除了以上的直接修改contro的源码以外，我们其实还可以自己直接监听dom的事件，然后设置control的enableZoom值为false禁止默认缩放，自己再业务代码中实现。只是把代码的位置换了下，这样可以尽量少的修改第三方库源码，以免后期升级时，需要额外的merge代码。

线上demo地址

OrbitControls修改版

参考： Stack Overflow