从图形学到Web前端：手把手教你用JavaScript实现3D拾取（Ray-AABB碰撞）-开发者社区

从屏幕点击到3D交互：JavaScript实现AABB碰撞检测全解析

在网页3D场景中点击选中一个模型，看似简单的交互背后隐藏着复杂的数学计算。当鼠标点击屏幕时，如何准确判断这个二维坐标对应着三维空间中的哪个物体？这正是3D拾取（Picking）技术的核心问题。本文将带你从零实现基于AABB（轴向对齐包围盒）的高效碰撞检测系统，无需依赖Three.js等库的现成工具，深入理解射线与包围盒相交检测的Slabs Method原理。

1. 从屏幕坐标到世界空间射线

实现3D拾取的第一步，是将鼠标点击的屏幕坐标转换为3D世界中的一条射线。这个过程涉及多个坐标系的转换：

function getWorldSpaceRay(canvas, camera, mouseX, mouseY) { // 将鼠标坐标归一化为[-1,1]区间 const x = (mouseX / canvas.width) * 2 - 1; const y = -(mouseY / canvas.height) * 2 + 1; // 创建标准设备坐标 const rayStart = new THREE.Vector3(x, y, -1); const rayEnd = new THREE.Vector3(x, y, 1); // 转换为世界坐标 rayStart.unproject(camera); rayEnd.unproject(camera); // 返回射线方向和起点 const direction = new THREE.Vector3() .subVectors(rayEnd, rayStart) .normalize(); return { origin: rayStart, direction }; }

关键参数说明：

参数	类型	说明
canvas	HTMLCanvasElement	渲染3D场景的画布元素
camera	THREE.Camera	场景使用的相机对象
mouseX	number	鼠标点击的X坐标（像素值）
mouseY	number	鼠标点击的Y坐标（像素值）

注意：不同图形库的坐标系统可能有所差异，WebGL中Y轴通常向下为正，而Three.js等库可能采用Y轴向上，转换时需特别注意符号处理。

2. AABB包围盒与Slabs Method原理

AABB（Axis-Aligned Bounding Box）是最常用的包围盒形式，其特点是各面都与坐标轴平行。这种特性使得相交检测计算大大简化。Slabs Method的核心思想是：

将AABB视为三组平行平面（slabs）的交集
分别计算射线与每组平面的交点区间
三个区间存在重叠部分则判定为相交

数学表达上，对于射线$P(t) = O + tD$和AABB $[x_{min},x_{max}]×[y_{min},y_{max}]×[z_{min},z_{max}]$，我们需要计算：

function rayAABBIntersect(ray, aabb) { let tmin = -Infinity, tmax = Infinity; // X轴平面检测 if (Math.abs(ray.direction.x) > 0.0001) { const tx1 = (aabb.min.x - ray.origin.x) / ray.direction.x; const tx2 = (aabb.max.x - ray.origin.x) / ray.direction.x; tmin = Math.max(tmin, Math.min(tx1, tx2)); tmax = Math.min(tmax, Math.max(tx1, tx2)); } else if (ray.origin.x < aabb.min.x || ray.origin.x > aabb.max.x) { return false; // 平行且在外侧 } // Y轴和Z轴检测类似... return tmin <= tmax && tmax >= 0; }

性能优化技巧：

提前终止：任一轴检测后若tmin > tmax可立即返回false
方向分量接近零：特殊处理平行情况避免除以零错误
SIMD优化：现代JavaScript引擎支持SIMD指令，可并行计算三个轴

3. 完整实现与Three.js对比

下面是一个完整的AABB碰撞检测实现，包含所有边界条件处理：

class AABB { constructor(min, max) { this.min = min; this.max = max; } intersectsRay(ray) { let tmin = -Infinity, tmax = Infinity; for (let i = 0; i < 3; i++) { if (Math.abs(ray.direction[i]) < 1e-6) { if (ray.origin[i] < this.min[i] || ray.origin[i] > this.max[i]) { return false; } } else { const invD = 1.0 / ray.direction[i]; let t1 = (this.min[i] - ray.origin[i]) * invD; let t2 = (this.max[i] - ray.origin[i]) * invD; if (t1 > t2) [t1, t2] = [t2, t1]; tmin = t1 > tmin ? t1 : tmin; tmax = t2 < tmax ? t2 : tmax; if (tmin > tmax) return false; } } return tmax >= 0 && tmin <= tmax; } }

与Three.js的Raycaster对比：

特性	自定义实现	Three.js Raycaster
精确度	可控制	固定
性能	可优化	通用实现
功能	仅AABB	支持多种几何体
代码量	小	大
灵活性	高	中等

提示：在需要检测复杂模型时，可先用AABB快速筛选，再用更精确的检测方法处理候选对象。

4. 实战应用与性能优化

在实际项目中应用AABB碰撞检测时，有几个关键考量点：

层次包围盒（BVH）优化：

对场景构建树状AABB层次结构
从根节点开始检测，快速排除不相交分支
特别适合处理大量物体的场景

class BVHNode { constructor(objects) { this.aabb = this.calculateAABB(objects); if (objects.length > 5) { // 阈值可根据场景调整 const [left, right] = this.splitObjects(objects); this.left = new BVHNode(left); this.right = new BVHNode(right); } else { this.objects = objects; } } intersectsRay(ray) { if (!this.aabb.intersectsRay(ray)) return []; if (this.objects) { return this.objects.filter(obj => obj.aabb.intersectsRay(ray)); } return [ ...this.left.intersectsRay(ray), ...this.right.intersectsRay(ray) ]; } }

性能实测数据：