有关THREE.Raycaster点拾取的问题记录

核心原理代码两句：

1： raycaster.setFromCamera(mouse, camera);    使用鼠标点击位置和camera(创建scene时的)位置，创造一个射线。

2：var intersects = raycaster.intersectObjects(scene.children);    检查射线和目标几何体们是否相交，并返回第一个相交的几何体。

其中camera是创建canvas时建立的相机对象，直接带入即可，该参数用于建立射线的方向的参数，关键是mouse的数据，我们现在人为将canvas的区域认为是一个-1.0~1.0的xoy局部坐标系平面，mouse就代表鼠标点击位置相对于这个局部坐标系的位置数据。但是在实际的鼠标点击事件时，我们只能获取鼠标在浏览器窗口中的相对位置，于是如何通过浏览器窗口中鼠标的点击位置来得到这个canvas中的局部坐标的数据，就是我们获取mouse数据的关键，这个转化计算的三个相关数据如图：

数据①就是我们在html中设定的canvas的style大小:

数据②①都能通过js代码得知：

注意其中的数据②一般都通过js代码获取，而不是通过我人为计算，因为需要考虑canvas的border宽度、canvas在div容器中的自动排列位置等，所以显然，人为计算算了个寂寞。

 

数据③：鼠标点击位置数据是相对于浏览器窗口起点的数据：

由此mouse的计算方法为：