three.js鼠标交互之Raycaster射线

简介

这段是网上抄的，基本能看懂大概意思了。

鼠标在屏幕上点击的时候，得到二维坐标p(x, y),再加上深度坐标的范围(0, 1), 就可以形成两个三位坐标A(x1, y1, 0), B(x2, y, 1), 由于它们的Z轴坐标是0和1，则转变到投影坐标系的话，一定分别是前剪切平面上的点和后剪切平面上的点，也就是说，在投影坐标系中，A点一定在能看见的所有模型的最前面，B点一定在能看见的所有的模型的最后边，将AB点连成线，AB线穿过的物体就是被点击的物体。而 Three.js提供一个射线类Raycasting来拾取场景里面的物体。更方便的使用鼠标来操作3D场景。（不过在实际代码中我们组成射线的两个点是摄像机所在视点与屏幕上点击的点连接而成的射线）

官方文档的定义

Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float ) {
origin —— 光线投射的原点向量。
direction —— 向射线提供方向的方向向量，应当被标准化。
near —— 返回的所有结果比near远。near不能为负值，其默认值为0。
far —— 返回的所有结果都比far近。far不能小于near，其默认值为Infinity（正无穷。）

这将创建一个新的raycaster对象。

那么接下来我们就先来创建一个射线

//  创建射线
var raycaster = new THREE.Raycaster();

创建射线还不够，我们还要更新射线

/*  setFromCamera  使用一个新的原点和方向来更新射线。
*   origin —— 光线投射的原点向量。
*   direction —— 为光线提供方向的标准化方向向量。
*/
raycaster.setFromCamera( mouse, camera );

最后就是检测与射线相交的对象

/**