Raycaster类（射线）

WebGL

Raycaster检测碰撞以物体的中心为起点，向各个顶点（vertices）发出射线，然后检查射线是否与其它的物体相交。如果出现了相交的情况，检查最近的一个交点与射线起点间的距离，如果这个距离比射线起点至物体顶点间的距离要小，则说明发生了碰撞。
缺点：当物体的中心在另一个物体内部时，是不能够检测到碰撞的。而且当两个物体能够互相穿过，且有较大部分重合时，检测效果也不理想。
注意点：在Three.js中创建物体时，它的顶点（veritces）数目是与它的分段数目相关的，分段越多，顶点数目越多。为了检测过程中的准确度考虑，需要适当增加物体的分段。

• THREE.Raycaster构造函数

new THREE.Raycaster( origin, direction, near, far ) {
//origin — 射线的起点向量。
//direction — 射线的方向向量，应该归一化。
//near — 所有返回的结果应该比 near 远。Near不能为负，默认值为0。
//far — 所有返回的结果应该比 far 近。Far 不能小于 near，默认值为无穷大。

• 用一个新的原点和方向向量来更新射线（ray）

.setFromCamera ( coords, camera )
//coords — 鼠标的二维坐标，在归一化的设备坐标(NDC)中，也就是X 和 Y 分量应该介于 -1 和 1 之间。
//camera — 射线起点处的相机，即把射线起点设置在该相机位置处。

• 检测光线是否与物体相交使用的是 intersectObject 或 intersectObjects 方法:

.intersectObject ( object, recursive )
//检查射线和物体之间的所有交叉点（包含或不包含后代）。交叉点返回按距离排序，最接近的为第一个。 返回一个交叉点对象数组。
//object — 用来检测和射线相交的物体。
//recursive — 如果为true，它还检查所有后代。否则只检查该对象本身。缺省值为false。

返回数组每一个对象的内容

[ { distance, point, face, faceIndex, indices, object }, ... ]
//distance – 射线的起点到相交点的距离 
//point – 在世界坐标中的交叉点 
//face – 相交的面 
//faceIndex – 相交的面的索引 
//indices – 组成相交面的顶点索引 
//object – 相交的对象

鼠标检测-点击事件

//声明raycaster和mouse变量
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseClick( event ) {
//通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
    raycaster.setFromCamera( mouse, camera );
    // 获取raycaster直线和所有模型相交的数组集合
    var intersects = raycaster.intersectObjects( scene.children );
    console.log(intersects);
    //将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
    for ( var i = 0; i < intersects.length; i++ ) {
        intersects[ i ].object.material.color.set( 0xff0000 );
    }
}
window.addEventListener( 'click', onMouseClick, false );

碰撞检测

/**
 *  功能：检测 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());
    // 检测射线与多个物体的相交情况
    var collisionResults = ray.intersectObjects(collideMeshList);
    // 如果返回结果不为空，且交点与射线起点的距离小于物体中心至顶点的距离，则发生了碰撞
    if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
        crash = true;   // crash 是一个标记变量
    }
}

• 物体的本地坐标乘以变换矩阵，得到了这个物体在世界坐标系中的值

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

• 由两点坐标，求向量

.sub( v : Vector3)
//Subtracts v from this vector. v到this
//高中数学: A(3,1) B(2,5)，向量AB等于B的坐标减去A的坐标