3D模型拾取

var x = e.clientX;
var y = e.clientY;

//屏幕坐标转换为 CVV 坐标
function getCVVFromScreen(mouse) {
 var viewWidth = canvas.width;
 var viewHeight = canvas.height;
 var x = mouse.x;
 var y = mouse.y;
 var cvv = {x: 0, y: 0};
 cvv.x = x / (viewWidth / 2) - 1;
 cvv.y = 1 - y / (viewHeight / 2);
 return cvv;
}
// 屏幕坐标转化为NDC坐标
var cvv = getCVVFromScreen({x: x, y: y});

function getProFromCVV(cvv, near, viewRadians, aspect) {
 //投影盒上边坐标（viewRadians 为度数，需转换为弧度）
 var top = near * Math.tan(viewRadians * 0.5 * Math.PI / 180);
 //投影盒高度
 var height = 2 * top;
 //投影盒宽度
 var width = aspect * height;
 //投影盒左边界坐标
 var left = -0.5 * width;

 var pro = {x: 0, y: 0};
 pro.x = ((cvv.x + 1) / 2) * width + left;
 pro.y = ((cvv.y + 1) / 2) * height + top - height;
 return pro;
}

var near = 0.5;
var projectionMatrix = matrix.perspective(
 fieldOfViewRadians,
 aspect,
 near,
 2000
);

// 投影坐标转化为相机坐标
function getViewFromPro(pro,near) {
 var point = new Vector3(pro.x, pro.y, -near);
 return point;
}

 canvas.addEventListener('click', function(e) {
 var x = e.clientX;
 var y = e.clientY;
 // 屏幕坐标转化为NDC坐标
 var cvv = getCVVFromScreen({x: x, y: y});
 // NDC 坐标转化为投影坐标
 cvv = getProFromCVV(cvv, 0.5, 60, canvas.width / canvas.height);
 // 投影坐标转化为观察坐标
 cvv = getViewFromPro(cvv);
 // 构造观察坐标系下的射线
 var newRay = new Ray(
 new Vector3(0, 0, 0),
 new Vector3(cvv.x, cvv.y, cvv.z)
 );
 // 求出三角形的顶点 A 在观察坐标系中的坐标
 var a = new Vector4(positions[0], positions[1], positions[2]);
 a = matrix.applyMatrix(a, viewMatrix);
 a = V4toV3(a);
 // 求出三角形的顶点 B 在观察坐标系中的坐标
 var b = new Vector4(positions[3], positions[4], positions[5]);
 b = matrix.applyMatrix(b, viewMatrix);
 b = V4toV3(b);
 // 求出三角形的顶点 C 在观察坐标系中的坐标
 var c = new Vector4(positions[6], positions[7], positions[8]);
 c = matrix.applyMatrix(c, viewMatrix);
 c = V4toV3(c);
 // 求出射线与三角形相交交点
 var result = newRay.intersectTriangle(a, b, c);
 
 positions1[0] = result.x;
 positions1[1] = result.y;
 positions1[2] = result.z + 0.1;
 render(gl);
 renderPoint(gl);
 return cvv;
 });

/**
 * 射线与 AABB 包围盒相交检测（Slab Method）
 * @param {Ray} ray - 射线对象 {origin, direction}
 * @param {AABB} box - 包围盒对象 {min: Vector3, max: Vector3}
 * @returns {boolean} 是否相交
 */
function intersectRayAABB(ray, box) {
    let tMin = -Infinity;
    let tMax = Infinity;

    // 逐轴检测
    for (let i = 0; i < 3; i++) {
        const origin = ray.origin[i];     // origin.x, origin.y, origin.z
        const direction = ray.direction[i]; // direction.x, direction.y, direction.z
        const bMin = box.min[i];
        const bMax = box.max[i];

        if (Math.abs(direction) < 1e-8) {
            // 射线与该轴平行 — 检查起点是否在 slab 内
            if (origin < bMin || origin > bMax) {
                return false; // 起点不在 slab 内，不相交
            }
        } else {
            // 计算射线进入/离开 slab 的时间
            const t1 = (bMin - origin) / direction;
            const t2 = (bMax - origin) / direction;

            // 确保 t1 是进入时间，t2 是离开时间
            let tNear = t1 < t2 ? t1 : t2;
            let tFar = t1 < t2 ? t2 : t1;

            // 更新全局的进入/离开时间
            tMin = Math.max(tMin, tNear);
            tMax = Math.min(tMax, tFar);

            // 如果进入时间已超过离开时间，不相交
            if (tMin > tMax) return false;
        }
    }

    // 射线需要向前方延伸（tMax >= 0），且进入时间不超过离开时间
    return tMax >= 0;
}

/**
 * 从一组顶点中计算 AABB 包围盒
 * @param {Float32Array} positions - 顶点位置数组 [x,y,z, x,y,z, ...]
 * @returns {Object} {min: Vector3, max: Vector3}
 */
function computeAABB(positions) {
    let minX = Infinity, minY = Infinity, minZ = Infinity;
    let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;

    for (let i = 0; i < positions.length; i += 3) {
        minX = Math.min(minX, positions[i]);
        minY = Math.min(minY, positions[i + 1]);
        minZ = Math.min(minZ, positions[i + 2]);
        maxX = Math.max(maxX, positions[i]);
        maxY = Math.max(maxY, positions[i + 1]);
        maxZ = Math.max(maxZ, positions[i + 2]);
    }

    return {
        min: new Vector3(minX, minY, minZ),
        max: new Vector3(maxX, maxY, maxZ)
    };
}