threejs非全屏下（或者说画布左边和上边与窗口的左边和上边有距离时）物体选中的问题及解决方案

前言： threejs非全屏下（或者说画布左边和上边与窗口的左边和上边有距离时）使过THREE.Raycaster来选中物体时会发生错位的问题。

一、 看看效果：

如图可以看出canvas画布有左上边距， 导致鼠标点击选中错位问题。

解决办法： 只需要将下面两行代码做如下修改即可；后面会有具体原理分析

//全屏下（或者说画布左边和上边与窗口的左边和上边重合时）将html坐标系转化为webgl坐标系，并确定鼠标点击位置
// mouse.x =  e.clientX / renderer.domElement.clientWidth * 2 - 1;
// mouse.y =  -(e.clientY / renderer.domElement.clientHeight * 2)+1;

//非全屏下（或者说画布左边和上边与窗口的左边和上边有距离时）将html坐标系转化为webgl坐标系，并确定鼠标点击位置
mouse.x =