Three.js Raycaster 射线 碰撞检测

用Raycaster来检测碰撞的原理很简单，咱们须要以物体的中心为起点，向各个顶点（vertices）发出射线，而后检查射线是否与其它的物体相交。若是出现了相交的状况，检查最近的一个交点与射线起点间的距离，若是这个距离比射线起点至物体顶点间的距离要小，则说明发生了碰撞。

这个方法有一个 缺点 ，当物体的中心在另外一个物体内部时，是不可以检测到碰撞的。并且当两个物体可以互相穿过，且有较大部分重合时，检测效果也不理想。

还有须要 注意 的一点是：在Three.js中建立物体时，它的顶点（veritces）数目是与它的分段数目相关的，分段越多，顶点数目越多。为了检测过程当中的准确度考虑，须要适当增长物体的分段。

Raycaster( origin, direction, near, far ) { }

origin — 射线的起点向量。
direction — 射线的方向向量，应该归一化。
near — 全部返回的结果应该比 near 远。Near不能为负，默认值为0。
far — 全部返回的结果应该比 far 近。Far 不能小于 near，默认值为无穷大。

检测碰撞的代码片断

/**
 *  功能：检测 movingCube 是否与数组 collideMeshList 中的元素发生了碰撞
 * 
 */
// 获取物体中心点坐标
var originPoint = movingCube.position.clone();

for (var vertexIndex = 0; vertexIndex < movingCube.geometry.vertices.length; vertexIndex++) {
    // 顶点原始坐标
    var localVertex = movingCube.geometry.vertices[vertexIndex].clone();
    // 顶点通过变换后的坐标
    var globalVertex = localVertex.applyMatrix4(movingCube.matrix);
    // 得到由中心指向顶点的向量
    var directionVector = globalVertex.sub(movingCube.position);
    
    // 将方向向量初始化,并发射光线
    var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
    // 检测射线与多个物体的相交状况
    // 若是为true，它还检查全部后代。不然只检查该对象自己。缺省值为false
    var collisionResults = ray.intersectObjects(collideMeshList, true);
    // 若是返回结果不为空，且交点与射线起点的距离小于物体中心至顶点的距离，则发生了碰撞
    if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
        crash = true;   // crash 是一个标记变量
    }
}

六步：
一、获取物体中心点坐标：
二、获取物体顶点坐标：
三、顶点通过变换后的坐标：
四、得到由中心指向顶点的向量：
五、用 THREE.Raycaster 对象从屏幕上的点击位置向场景中发射一束光线：
六、用 intersectObjects 来判断指定对象有没有被这束光线击中，返回被击中对象的信息，相交的结果会以一个数组的形式返回，其中的元素依照距离排序，越近的排在越前

在Three.js中是使用矩阵来记录3D转换的，每个Object3D的实例都有一个矩阵，存储了位置position，旋转rotation和伸缩scale。

var globalVertex = localVertex.applyMatrix4(movingCube.matrix);

这一句代码将物体的本地坐标乘以变换矩阵，获得了这个物体在世界坐标系中的值，处理以后的值才是咱们所须要的。