射线Ray

射线Ray和三维向量Vector3一样属于数学几何计算相关的API,可以进行射线交叉计算。

学习Three.js中的射线Ray概念，你可以类比数学几何中提到的射线，在三维空间中，一条线把一个点作为起点，然后沿着某个方向无限延伸。

// 创建射线对象Ray
const ray = new THREE.Ray();

// 设置射线起点
ray.origin = new THREE.Vector3(1,0,3);

// 表示射线沿着x轴正方向
ray.direction = new THREE.Vector3(1,0,0);

.intersectTriangle()方法

射线Ray有很多关于数学计算的方法，下面就先介绍一个与三角形交叉计算相关的方法.intersectTriangle(),简单说，就是计算一个射线和一个三角形在3D空间中是否交叉。

执行.intersectTriangle()方法，如果相交返回交点坐标，不相交返回空值null。

// 三角形三个点坐标
const p1 = new THREE.Vector3(100, 25, 0);
const p2 = new THREE.Vector3(100, -25, 25);
const p3 = new THREE.Vector3(100, -25, -25);
const point = new THREE.Vector3();//用来记录射线和三角形的交叉点
// `.intersectTriangle()`计算射线和三角形是否相交叉，相交返回交点，不相交返回null
const result = ray.intersectTriangle(p1,p2,p3,false,point);
console.log('交叉点坐标', point);
console.log('查看是否相交', result);

.intersectTriangle()参数4表示是否进行背面剔除，p1,p2,p3可以理解为一个三角形，有正反两面，一面是正面，一面是反面。

在一面观察p1,p2,p3，如果沿着三个点的顺序转圈是逆时针方向，表示正面，另一面观察，p1,p2,p3就是顺时针方向，表示背面。 .

intersectTriangle()参数4设为true，表示进行背面剔除，虽然从几何空间上讲，该案例源码射线和三角形虽然交叉，但在threejs中，三角形背面对着射线，视为交叉无效，进行背面剔除，返回值r是null。

Raycaster(射线拾取模型)

射线投射器Raycaster

射线投射器Raycaster具有一个射线属性.ray，该属性的值就是射线对象Ray。

const raycaster = new THREE.Raycaster();

// 设置射线起点
raycaster.ray.origin = new THREE.Vector3(-100, 0, 0);
// 设置射线方向射线方向沿着x轴
raycaster.ray.direction = new THREE.Vector3(1, 0, 0);

射线交叉计算(.intersectObjects()方法)

射线投射器Raycaster通过.intersectObjects()方法可以计算出来与自身射线.ray相交的网格模型。 .intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算,未选中对象返回空数组[],选中一个对象，数组1个元素，选中多个对象，数组多个元素，如果选中多个对象，对象在数组中按照先后排序。

const raycaster = new THREE.Raycaster();
raycaster.ray.origin = new THREE.Vector3(-100, 0, 0);
raycaster.ray.direction = new THREE.Vector3(1, 0, 0);
// 射线发射拾取模型对象
const intersects = raycaster.intersectObjects([mesh1, mesh2, mesh3]);
console.log("射线器返回的对象", intersects);

射线选中的模型对象改变材质颜色

const intersects = raycaster.intersectObjects([mesh1, mesh2, mesh3]);
if (intersects.length > 0) {
    // 选中模型的第一个模型，设置为红色
    intersects[0].object.material.color.set(0xff0000);
}

屏幕坐标转标准设备坐标

// 坐标转化公式
addEventListener('click',function(event){
    const px = event.offsetX;
    const py = event.offsetY;
    //屏幕坐标px、py转标准设备坐标x、y
    //width、height表示canvas画布宽高度
    const x = (px / width) * 2 - 1;
    const y = -(py / height) * 2 + 1;
})

Raycaster(鼠标点击选中模型)

在实际开发中，射线投射器Raycaster经常会使用到，本次先通过一个简单的小案例来给大家展示射线投射器Raycaster的射线拾取功能，简单说就是鼠标点击，选中一个模型对象。下面代码的功能是鼠标单击threejs的canvas画布，通过射线投射器Raycaster射线拾取网格模型，被选中拾取到的网格模型改变颜色。

renderer.domElement.addEventListener('click', function (event) {
    // .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px
    const px = event.offsetX;
    const py = event.offsetY;
    //屏幕坐标px、py转WebGL标准设备坐标x、y
    //width、height表示canvas画布宽高度
    const x = (px / width) * 2 - 1;
    const y = -(py / height) * 2 + 1;
    //创建一个射线投射器`Raycaster`
    const raycaster = new THREE.Raycaster();
    //.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray
    // 形象点说就是在点击位置创建一条射线，射线穿过的模型代表选中
    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
    //.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算
    // 未选中对象返回空数组[],选中一个对象，数组1个元素，选中两个对象，数组两个元素
    const intersects = raycaster.intersectObjects([mesh1, mesh2, mesh3]);
    console.log("射线器返回的对象", intersects);
    // intersects.length大于0说明，说明选中了模型
    if (intersects.length > 0) {
        // 选中模型的第一个模型，设置为红色
        intersects[0].object.material.color.set(0xff0000);
    }
})

Canvas尺寸变化(射线坐标计算)

鼠标单击canvas画布，用射线拾取模型的时候，有一点要注意，Canvas画布尺寸如果不是固定的，而是变化的，会对坐标变换有影响。

// 画布跟随窗口变化
window.onresize = function () {
    const width = window.innerWidth - 200; //canvas画布宽度
    const height = window.innerHeight - 60; //canvas画布高度
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    document.getElementById('left').style.height = height + 'px';
};

renderer.domElement.addEventListener('click', function (event) {
    const width = window.innerWidth-200;
    const height = window.innerHeight-60;
    //屏幕坐标转WebGL标准设备坐标
    const x = (px / width) * 2 - 1;
    const y = -(py / height) * 2 + 1;
})

射线拾取层级模型

如果一个层级模型包含多个网格网格模型Mesh，使用.intersectObjects()方法拾取的时候，返回的结果默认是层级模型的后代Mesh，没办法整体选中该层级模型。

给需要射线拾取父对象的所有子对象Mesh自定义一个属性.ancestors，然后让该属性指向需要射线拾取父对象。

const cunchu = model.getObjectByName('存储罐');
// 射线拾取模型对象(包含多个Mesh)
// 可以给待选对象的所有子孙后代Mesh，设置一个祖先属性ancestors,值指向祖先(待选对象)    
for (let i = 0; i < cunchu.children.length; i++) {
    const group = cunchu.children[i];
    //递归遍历chooseObj，并给chooseObj的所有子孙后代设置一个ancestors属性指向自己
    group.traverse(function (obj) {
        if (obj.isMesh) {
            obj.ancestors = group;
        }
    })
}
// 射线交叉计算拾取模型
const intersects = raycaster.intersectObjects(cunchu.children);
console.log('intersects', intersects);
if (intersects.length > 0) {
    // 通过.ancestors属性判断那个模型对象被选中了
    outlinePass.selectedObjects = [intersects[0].object.ancestors];
}

14.射线拾取模型